jquery的每個（）和js陣列未按預期

-1

<div class="box-content"> 
    <span> 
     <h4 id="title">title1</h4> 
     <h5 id="texto"></h5> 
    </span> 
    <span> 
     <h4 id="title">title2</h4> 
     <h5 id="texto"></h5> 
    </span> 
    <span> 
     <h4 id="title">title3</h4> 
     <h5 id="texto"></h5> 
    </span> 
    .... 
</div>

，我需要使用陣列如下

$(".pluscontrol").click(function(){ 
    var itemBoxValues1 = ["text1", "text2", "text3"]; 
    var i = 0; 
    $('.box-content').children().each(function(){ 
     var tmp = itemBoxValues1[i]; 
     $('.box-content').children().children("h5").text(" id: "+i+" val "+tmp); 
     i++; 
    }); 
});

來填充結構，但它不「科技工作如我所料，因爲在所有<h5>元素打印：

<span> 
    <h4 id="title">title n </h4> 
    <h5 id="texto">id: 35 val 23</h5> 
</span>

我不明白爲什麼它的發生。謝謝。

來源

2016-08-18 Rene Limon

您目前使用的每個內的孩子們選擇。你每個函數內的'this'將是你正在迭代的當前對象。減少'$（'。box-content'）。children（）。children（「h5」）...''到'$（this）.children（'h5'）...' – Jecoms

'id''根據定義應該是唯一的。 – PeterKA

不相關，但我很好奇，爲什麼自己增加價值'我'？你可以做'.each（function（index，element）{}）' –

試試這個：

$(".pluscontrol").click(function(){ 
    var itemBoxValues1 = ["text1", "text2", "text3"]; 
    var i = 0; 
    $('.box-content').children().each(function(){ 
     var tmp = itemBoxValues1[i]; 
     $(this).children("h5").text(" id: "+ i +" val "+ tmp); 
     i++; 
    }); 
});

更新

裏面的每個，你需要找到當前span的孩子，所以你需要使用$(this)，這$('.box-content').children().children("h5")將返回所有h5標籤

您也可以使用以下內容保存一些代碼：

var itemBoxValues1 = ["text1", "text2", "text3"]; 

$('.box-content > span').each(function(i, span){  
    $(span).children("h5").text(" id: "+ i +" val "+ itemBoxValues1[i]);  
});

來源

2016-08-18 18:23:59

是的，問題解決了，但我不明白爲什麼。 –

使您的選擇器更緊湊，因此您不需要.children()方法。使用.each()，您不需要增加i，因爲它已內置，並且this也已建立。

此外，您需要使用class而不是id，因爲每個文檔（即網頁）的id必須是唯一的。對於類（您需要更改爲或HTML無效），您可以使用$('.texto')而不是$(.box-content h5')。

$(".pluscontrol").click(function() { 
 
    var tmp = ["text1", "text2", "text3"]; 
 
    $('.box-content h5').each(function(i) { 
 
    $(this).text(" id: " + i + " val: " + tmp[i]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-content"> 
 
    <span> 
 
     <h4 class="title">title1</h4> 
 
     <h5 class="texto"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 class="title">title2</h4> 
 
     <h5 class="texto"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 class="title">title3</h4> 
 
     <h5 class="texto"></h5> 
 
    </span> 
 

 
    <button class='pluscontrol'>GO</button>

來源

2016-08-18 18:32:45 zer00ne

您在每次迭代越來越

id: 35 val 23

因爲引用到每個span元素被覆蓋掉了，每次循環運行（下文說明）。

我會寫這樣的：

$(".pluscontrol").click(function(){ 
     var itemBoxValues1 = ["text1", "text2", "text3"]; 

     $('.box-content').children().each(function(i){ 
      var tmp = itemBoxValues1[i]; 
      $(this).children("h5").text(" id: " + i + " val: " + tmp); 
     }); 
    });

你不需要變量「i」，你也不需要增加它的循環中。 jQuery.each（）爲您提供了一個索引變量，並在循環內自動遞增它。
您不需要爲span元素的子元素重新查詢DOM。只需調用$（this）即可獲得跨度，'this'是對循環內迭代的每個對象的引用。

來源

2016-08-18 18:35:15 morecchia808

試試這個：

<html> 
 
<head></head> 
 
<title></title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<style type="text/css"> 
 

 

 
[class^="B_class"]:first-child{ 
 
    display: none; 
 
} 
 

 
</style> 
 
<body> 
 

 

 
<div class="box-content"> 
 
    <span> 
 
     <h4 id="title">title1</h4> 
 
     <h5 id="text0"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 id="title">title2</h4> 
 
     <h5 id="text1"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 id="title">title3</h4> 
 
     <h5 id="text2"></h5> 
 
    </span> 
 
    <input type="button" value="plus+" id="plus"> 
 
</div> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
    var items = $(".box-content span").length; 
 
    var itemBoxValues1 = ["text1", "text2", "text3"]; 
 

 

 
    $("#plus").click(function(){ 
 
     for(var i=0;i<items;i++) 
 
     { 
 
      var tmp = itemBoxValues1[i]; 
 
      var theid = "#text"+i; 
 
      $(theid).text("id :"+i+" val "+tmp); 
 
     } 
 
    }); 
 

 
}); 
 

 
</script> 
 

 
</html>

注意：不要爲元素使用相同的ID名稱。

來源

2016-08-18 18:40:14

根據定義是一個獨特的id。您可以改爲使用data-屬性或類。

下面是你可以重新編寫代碼，採取一切可用數據的優勢：

$('.box-content > span').each(function(i,v) { 
 
    $(v).find('h5').text(' id: ' + (i+1) + '; val: ' + $(v).find('h4').text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-content"> 
 
    <span> 
 
     <h4 data-id="title">title1</h4> 
 
     <h5 data-id="texto"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 data-id="title">title2</h4> 
 
     <h5 data-id="texto"></h5> 
 
    </span> 
 
    <span> 
 
     <h4 data-id="title">title3</h4> 
 
     <h5 data-id="texto"></h5> 
 
    </span> 
 
    .... 
 
</div>

來源

2016-08-18 18:41:27 PeterKA

jquery的每個（）和js陣列未按預期

回答

相關問題