迭代通過列表元素 - jQuery的

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，小時等） 。

我做了以下的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

你應該重複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 - 名單上點擊查看更改

Answer 2

即使您正在遍歷匹配的元素，您並未使用它們來縮小其子節點。試試這個

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