向單獨的ul中的每個列表項添加一個數組

Question

我試圖通過將1到4附加到列表項來將數組的內容添加到頁面上的每個列表。我遇到的問題是我無法對每個列表執行此操作，如果它們只有3個列表項，我不想再添加其他項，只需在3處結束列表。我還想刪除0。

在此先感謝！

var levels = [ "1", "2", "3", "4" ]; 
 
$('ul li').each(function (x) { 
 
$(this).append(levels[x]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
<li>0</li> 
 
<li>0</li> 
 
<li>0</li> 
 
<li>0</li> 
 
</ul> 
 

 
<ul> 
 
<li>0</li> 
 
<li>0</li> 
 
<li>0</li> 
 
</ul> 
 

 
<ul> 
 
<li>0</li> 
 
<li>0</li> 
 
<li>0</li> 
 
<li>0</li> 
 
</ul>

FIDDLE

Answer 1

遍歷列表，然後再遍歷列表項爲每個列表

var levels = [ "1", "2", "3", "4" ]; 

$('ul').each(function(i, ul) { 
    $(ul).find('li').each(function(j, li) { 
     $(this).html(levels[j]); 
    }); 
}); 

FIDDLE

Answer 2

使用:nth-child()和jQuery.each()

var levels = ["1", "2", "3", "4"]; 
 
$.each(levels, function(i, x) { 
 
    $('ul li:nth-child(' + (i + 1) + ')').html(x); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li>0</li> 
 
    <li>0</li> 
 
    <li>0</li> 
 
    <li>0</li> 
 
</ul> 
 

 
<ul> 
 
    <li>0</li> 
 
    <li>0</li> 
 
    <li>0</li> 
 
</ul> 
 

 
<ul> 
 
    <li>0</li> 
 
    <li>0</li> 
 
    <li>0</li> 
 
    <li>0</li> 
 
</ul>