Skip to main content
adicionou 59 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

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:

jQuery .children()

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 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>

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

Referência:

jQuery .children()

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()

adicionou 131 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

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 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>

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

Referência:

jQuery .children()

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>

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 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>

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

Referência:

jQuery .children()

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 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>

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

Referência:

jQuery .children()

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

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>

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 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>

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

Referência:

jQuery .children()