在循环中附加 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>