Javascript 遍历列表元素-jQuery

我有以下清单：

<ul class="my-list">
   <li>
     <ul>
      <li>Now</li> 
      <li><img src="image.png"/></li> //change this
      <li>25˚</li> //change this
     </ul>
   </li>
   <li>
     <ul>
      <li>12 AM</li>
      <li><img src="image.png"/></li>
      <li>30˚</li>
     </ul>
   </li>
</ul>

我试图对代码列表使用相同的代码（这只是其中的一部分），但我的jQuery代码不起作用，我不知道为什么。

---

有人能帮我吗？谢谢。

即使您正在迭代匹配的元素，也不会使用它们来缩小其子节点的范围。试试这个

$('.my-list ul').each(function(index, elem){
    var innerList = $(elem).children('li');
    innerList.eq(0).html('Test')
    innerList.eq(1).html('Test2')
    innerList.eq(2).html('Test3')
});

---

即使您正在迭代匹配的元素，也不会使用它们来缩小其子节点的范围。试试这个

$('.my-list ul').each(function(index, elem){
    var innerList = $(elem).children('li');
    innerList.eq(0).html('Test')
    innerList.eq(1).html('Test2')
    innerList.eq(2).html('Test3')
});

---

您应该使用当前ul的子代迭代li元素，该子代匹配并仅以第二个li为目标：

if ($(this).attr('class') == 'my-list') {
    // this only target second element of 'li'
    $(this).children().eq(1).each(function () {
       // then find ul element
        $(this).find('ul').each(function () {
            // change the content by using context
            $("li:eq(0)", this).html("Test");
            $("li:eq(1)", this).html("test2");
            $("li:eq(2)",this).html("test3");
        });
    });
}

---

-单击列表以查看更改

您应该使用当前ul的子代迭代li元素，该子代匹配并仅针对第二个li:

if ($(this).attr('class') == 'my-list') {
    // this only target second element of 'li'
    $(this).children().eq(1).each(function () {
       // then find ul element
        $(this).find('ul').each(function () {
            // change the content by using context
            $("li:eq(0)", this).html("Test");
            $("li:eq(1)", this).html("test2");
            $("li:eq(2)",this).html("test3");
        });
    });
}

---

-单击列表以查看更改

效果良好，谢谢！现在我明白我错在哪里了。它起作用了，谢谢！现在我明白我错在哪里了。这是什么？显示代码的完整上下文这是什么？显示代码的完整上下文