Question

我有以下列表：

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

我想遍历此列表并更改第二个'ul'（img src，小时等）中的'li'元素。

我已经制作了以下jQuery代码：

        if($(this).attr('class')=='my-list'){
            $("li").each(function(){
                $("ul").each(function(){
                    $("li:eq(0)").html("Test");
                    $("li:eq(1)").html("test2");
                    $("li:eq(2)").html("test3");
                });
            });
        }

我正在尝试对代码列表使用相同的代码（这只是它的一部分），但我的jQuery代码不起作用，我无法弄清楚原因。有人能帮我吗？感谢。

Answer 1

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

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

Answer 2

你应该使用匹配的当前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");
        });
    });
}

DEMO - 点击列表查看更改

迭代列表元素 - jQuery

2 个答案: