一個循環內追加UL遞歸插入

Question

下面的代碼工作正常

$('.source').each(function(i){ // .source is ul's class 
    $('#target ul').append('<li><a>link</a><div>div</div></li>'); 
}); 

結果：

#target ul 
<li> 
    <a>link</a> 
    <div>div</div> 
</li> 

但附加UL每個循環中遞歸插入：

$('.source').each(function(i){ 
    $('#target ul').append('<li><a>link</a><ul><li>list</li></ul></li>'); 
}); 

結果：

#target ul 
<li> 
    <a>link</a> 
    <ul> 
    <li>list</li> 
    <li> 
     <a>link</a> 
     <ul>....</ul> 
    </li> 
</li> 

但它應該導致這樣的：

#target ul 
<li> 
    <a>link</a> 
    <ul> 
    <li>list</li> 
</li> 

什麼是代碼中的問題？

$('.source').each(function(){ 
 
    
 
$('#target ul').append('<li><a>link</a><ul><li>list</li></ul></li>'); 
 
});

.source { 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="target"> 
 
<ul> 
 
<li>foo</li> 
 
</ul> 
 
</div> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul>

Answer 1

嘗試使用$('#target > ul')搶直接孩子。

選擇器#target ul獲取作爲#target的後裔的所有內容，並且是ul。但是，這些元素可能會嵌套幾代。通過添加>，我們告訴它只抓住第一代。

$('.source').each(function(){ 
 
    
 
$('#target > ul').append('<li><a>link</a><ul><li>list</li></ul></li>'); 
 
});

.source { 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="target"> 
 
<ul> 
 
<li>foo</li> 
 
</ul> 
 
</div> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul> 
 
<ul class="source"> 
 
<li>list</li> 
 
</ul>