-1

Preciso de analisar os filhos directos de um ul dá qual estou a fazer clone() só que não estou a conseguir obter nenhum resultado.

HTML

<ul id="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>

JS

function menu(){
    clone = $( "#menu").clone();
    clone.children("> li").each(function() {
        if($(this).find("ul").length > 0){
            $(this).append("<span>Adiconar Seta</span>");
        } 
    });
}

Sabem dizer-me o que estou a fazer de errado?

2
  • Não entendi qual o resultado que vc espera... Qual seria a finalidade desse objeto clonado?
    – JrD
    Commented 24/09/2019 às 12:02
  • Vc vai clonar um Menu inteiro que vai ter o mesmo ID do menu clonado e depois que colocar o span solto dentro de uma UL tipo <ul><span></span><li></li></ul>? Esta tudo meio confuso e sem sentido... Explica melhor ai o que vc quer fazer
    – hugocsl
    Commented 24/09/2019 às 12:15

1 Resposta 1

1

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").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 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:

jQuery .children()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .