2015-11-02 137 views
1

我有以下列表:迭代通過列表元素 - 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> 

我想通過這個列表迭代和修改第二「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代碼不工作我無法弄清楚爲什麼。 有人可以幫我嗎?謝謝。

+0

這是什麼?顯示您的代碼的完整上下文 – charlietfl

回答

0

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

+0

它的工作,謝謝!現在我明白我的錯在哪裏了。 – VLun

0

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

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