Não precisa usar >
no seletor no .children()
. Se você quer achar os filhos diretos li
da ul
clonada, basta apenas usar o seletor li
:
clone.children("li").each(function() {
O método .children()
busca apenas elementos no primeiro nível (filhos diretos), ou seja, .children("li")
do objeto clonado irá encontrar os seguintes li
's:
<ul id="menu">
<li>Menu 1 </li> ← este
<li> Menu 2 ← este
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul>
</li>
<li>Menu 3 </li> ← este
</ul>
Após clonar o elemento, é preciso inseri-lo em algum lugar. No exemplo abaixo usei .append()
para inserir no final do body
.
Seu exemplo:
function menu(){
clone = $( "#menu"".menu").clone();
clone.children("li").each(function() {
if($(this).find("ul").length > 0){
$(this).append("<span>Adiconar Seta</span>");
}
});
$("body").append(clone);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="menu()">Clonar</button>
<ul id="menu">class="menu">
<li>Menu 1 </li>
<li> Menu 2
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul>
</li>
<li>Menu 3 </li>
</ul>
O problema é que ao clonar <ul id="menu">
você estará duplicando id's, o que é incorreto no HTML, onde um id deve ser único, embora isso não irá afetar a parte da clonagem, pois o código $("#menu").clone()
irá apontar sempre para o primeiro <ul id="menu">
. Porém é melhor trocar o id="menu"
por class="menu"
.
Referência: