JQuery - выберите немедленный текст li без выбора дочернего текста ul.

Question

Я пытаюсь взять структуру вложенных неупорядоченных списков html в качестве базы данных для некоторой информации, необходимой для организации и анализа. Я пытаюсь фильтровать, подсчитывать и представлять информацию с помощью jQuery. Я стараюсь, чтобы в списках не было атрибутов класса или идентификатора, чтобы они были очень чистыми. Только корень будет иметь класс или идентификатор вроде этого:

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

Моего вопроса: как я могу выбрать непосредственный дочерний текстовый узел лития без выделения текста в ребенке, что Ли и внуке Ul в (то есть его подсписки)? Например, если список HTML выше, я хотел бы быть в состоянии придумать список всех текстовых узлов второго уровня:

• Первый второй уровень элемент
• Второй второго уровня элемента
• третьего второго уровня элемент

Или весь текст от третьего уровня ... и т.д. Это позволило бы мне перечислить и сосчитать элементы в заданном уровне. Наиболее близким я был:

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

Но это не гибкое решение. Что, если список имеет много уровней, скажем, семь? чтобы выбрать шестой уровень, вам нужно будет сделать что-то вроде:

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

Должен быть другой способ, но я не нашел его. Любые предложения очень ценятся.

Answer 1

Если вы хотите, чтобы выбрать второй Li, например <li> Second second-level element, вы можете использовать селектор > ребенка с eq, как это:

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

Для третьего вы установили eq в 2, поскольку его индексация начинается с 0.

Для петли над ними, вы можете использовать each так:

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

Дополнительная информация:

• Child Selector
• .eq()

Answer 2

Как указано здесь :

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

«Нормальные методы DOM позволяют получить доступ к текстовому содержимому для одного элемента»

Так это одно решения: Этот выход третьего элемент уровня один за другим:

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

Это выводит элементы второго уровня:

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

Это выводит элементы первого уровня:

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

Answer 3

Более надежный метод заключается в использовании обхода «содержимое» и выберите узел с типом (3), который является типом узла для дочернего элемента текста в HTML. Например:

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