追加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です。しかし、これらの要素は数世代に渡ってネストすることができます。 >を追加することで、第1世代のみを取得するように指示します。

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