Jquery: seleccione texto inmediato sin seleccionar texto de niños ul

Question

Estoy tratando de tomar una estructura de listas desordenadas html anidadas como una base de datos para cierta información que es necesario organizar y analizar. Intento filtrar, contar y presentar la información usando jQuery. Me esfuerzo por que las listas no tengan ningún atributo de clase o id, para que estén muy limpias. Sólo la raíz tendría una clase o identificador de la siguiente manera:

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

Mi pregunta es: ¿cómo puedo seleccionar nodo de texto secundario inmediato de una li sin seleccionar texto en hijo y el nieto de UL (es decir, sus sublistas) de que li? Por ejemplo, dada la lista HTML anterior, me gustaría ser capaz de llegar con una lista de todos los nodos de texto en el segundo nivel:

• Primera segundo nivel elemento
• segundo elemento de segundo nivel
• tercer elemento de segundo nivel

O todo el texto del tercer nivel ... etc, que me permitiera lista y contar los elementos de un nivel determinado. Lo más cerca que he estado es:

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

Pero no es una solución flexible. ¿Qué pasa si la lista tiene muchos niveles, digamos siete? para seleccionar sexto nivel que tendría que hacer algo como:

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

debe haber otra manera, pero no he encontrado. Cualquier sugerencia es muy apreciada.

Answer 1

Si desea seleccionar segunda li por ejemplo <li> Second second-level element, puede utilizar el selector de > niño con eq así:

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

Por tercer configura eq a 2 porque su indexación comienza desde 0.

Para bucle sobre ellos, se puede utilizar el each así:

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

Más información:

• Child Selector
• .eq()

Answer 2

Como se ha dicho aquí :

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

"métodos DOM normales permiten acceder a los contenidos de texto de un solo elemento"

Así que esta es una solución: Este salidas tercer elementos de nivel uno a uno:

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

Esto produce elementos de segundo nivel:

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

Este salidas elementos de primer nivel:

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

Answer 3

Un método más robusto es utilizar el recorrido "contenido" y seleccione el nodo con el tipo de (3), que es el tipo de nodo para un elemento de texto niño en HTML. Por ejemplo:

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