Question

我在html中有这段代码：

<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>

我不明白为什么会这样。感谢。

Answer 1

让您的选择器更紧密，因此您不需要.children()方法。使用.each()，您不需要增加i，因为它已内置，this也已建立。

此外，您需要使用class而不是id，因为每个文档（即网页）的id必须是唯一的。对于课程（您需要更改或HTML无效），您可以使用$('.texto')代替$(.box-content h5')。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

$(".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]);    
});

Answer 3

每次迭代都会得到

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'是对循环内迭代的每个对象的引用。

Answer 4

试试这个：

＆＃13;

<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>

＆＃13;

注意：不要对元素使用相同的ID名称。

Answer 5

根据定义，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>

jquery each（）和js数组不按预期工作

5 个答案: