Jquery - seleziona il testo li immediato senza selezionare il testo di children ul

Question

Sto provando a prendere una struttura di elenchi non ordinati hidml nidificati come un database per alcune informazioni che è necessario organizzare e analizzare. Sto cercando di filtrare, contare e presentare le informazioni usando jQuery. Mi sto adoperando affinché gli elenchi non abbiano alcun attributo di classe o id, in modo che siano molto puliti. Solo la radice avrebbe una classe o un id in questo modo:

<ul id="root"> 
<li> First first-level element 
    <ul> 
    <li> First second-level element 
     <ul> 
     <li>First Third-level element</li> 
     <li>Second Third-level element</li> 
     </ul> 
    </li> 
    <li> Second second-level element 
     <ul> 
     <li>Third Third-level element</li> 
     <li>Fourth Third-level element</li> 
     </ul> 
    </li> 
    </ul> 
</li> 
<li> Second first-level element 
    <ul> 
    <li> Third second-level element 
     <ul> 
     <li>Fifth Third-level element</li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 

La mia domanda è: come posso selezionare nodo di testo figlio diretto di una Li senza selezionare testo in figlio che di Li e nipote di UL (cioè le sue liste parziali)? Ad esempio, data la lista HTML sopra, vorrei essere in grado di venire con un elenco di tutti i nodi di testo nel secondo livello:

• Prima di secondo livello elemento
• elemento secondo livello
• terzo di secondo livello elemento

O tutto il testo dal terzo livello, ecc ... che mi avrebbe permesso di elencare e contare gli oggetti in un determinato livello. Il più vicino che sono stato è:

// to select items in second but not third level 
$('ul#root ul').not('ul#root ul ul').children('li') 

Ma non è una soluzione flessibile. Cosa succede se la lista ha molti livelli, diciamo sette? per selezionare sesto livello che avrebbe dovuto fare qualcosa di simile:

// to select items in second but not third level 
$('ul#root ul ul ul ul ul').not('ul#root ul ul ul ul ul ul').children('li') 

Ci deve essere un altro modo, ma io non l'ho trovato. Ogni suggerimento è molto apprezzato.

Answer 1

Se si desidera selezionare secondo li esempio <li> Second second-level element, è possibile utilizzare il selettore > bambino con eq come questo:

$('ul#root > ul > li').eq(1) 

Per il terzo si imposta eq-2 perché la sua indicizzazione parte da 0.

Per un ciclo su di loro, è possibile utilizzare il each come questo:

$('ul#root > ul > li').eq(1).each(function(){ 
    alert($(this).text()); 
}); 

Ulteriori informazioni:

• Child Selector
• .eq()

Answer 2

Come detto qui :

jQuery: Find the text of a list item that contains a nested ul

"metodi DOM normali permettono di accedere ai contenuti di testo per un solo elemento"

Quindi questa è una soluzione: Questo uscite terzi elementi a livello uno per uno:

$('ul#root > li > ul > li > ul').children('li').each(function(){ 
    alert($(this)[0].firstChild.textContent); 
}); 

Questo produce elementi di secondo livello:

$('ul#root > li > ul').children('li').each(function(){ 
    alert($(this)[0].firstChild.textContent); 
}); 

Questo uscite elementi di primo livello:

$('ul#root').children('li').each(function(){ 
    alert($(this)[0].firstChild.textContent); 
}); 

Answer 3

Un metodo più affidabile è quello di utilizzare l'attraversamento "contenuti" e selezionare il nodo con il tipo di (3), che è il tipo di nodo per un elemento figlio testo in HTML. Ad esempio:

$('ul#root > li > ul > li > ul').children('li').contents().each(function() { 
    if (this.nodeType == 3) alert(this.nodeValue); 
});