Jquery - sélectionnez le texte immédiatement li sans sélectionner les enfants le texte de ul

Question

J'essaie de prendre une structure de listes html non ordonnées imbriquées comme une base de données pour certaines informations un besoin d'organiser et d'analyser. J'essaie de filtrer, compter et présenter l'information en utilisant jQuery. Je cherche à ce que les listes n'aient aucun attribut de classe ou d'id, de sorte qu'elles soient très propres. Seule la racine aurait une classe ou id comme ceci:

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

Ma question est: comment puis-je sélectionner un nœud de texte enfant immédiat li sans sélectionner du texte dans ce que l'enfant de li et petits-enfants (à savoir ses de les sous-listes) de ul? Par exemple, compte tenu de la liste HTML ci-dessus, je voudrais être en mesure de trouver une liste de tous les nœuds de texte dans le second niveau:

• Premier élément de second niveau
• Deuxième élément de second niveau
• troisième élément de second niveau

Ou tout le texte du troisième niveau ... etc. Cela me permettrait de liste et compte les éléments d'un niveau donné. Le plus proche que j'ai été est:

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

Mais ce n'est pas une solution flexible. Que faire si la liste a plusieurs niveaux, disons sept? pour sélectionner sixième niveau vous devez faire quelque chose comme:

// 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') 

Il doit y avoir une autre façon, mais je n'ai pas trouvé. Les suggestions sont très appréciées.

Answer 1

Si vous voulez sélectionner deuxième li par exemple <li> Second second-level element, vous pouvez utiliser le sélecteur d'enfant > avec eq comme ceci:

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

Pour la troisième vous définissez eq-2 parce que son indexation commence à partir 0.

Pour boucler sur eux, vous pouvez utiliser le each comme ceci:

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

Plus d'info:

• Child Selector
• .eq()

Answer 2

Comme indiqué ici :

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

"méthodes DOM normales permettent d'accéder aux contenus de texte pour un seul élément"

C'est donc une solution: Ce troisième éléments de niveau sorties, un par un:

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

Cette sortie des éléments de second niveau:

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

Ce premier éléments de niveau sorties:

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

Answer 3

Un procédé plus robuste est d'utiliser les traversal « contenu » et le noeud de sélection de type de (3) qui est le type de noeud pour un élément enfant de texte en HTML. Par exemple:

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