Я пытаюсь взять структуру вложенных неупорядоченных списков HTML в качестве базы данных для некоторой информации, которую необходимо систематизировать и анализировать. Я пытаюсь отфильтровать, посчитать и представить информацию с помощью jQuery. Я стараюсь, чтобы списки не имели какого-либо атрибута class или id, чтобы они были очень чистыми. Только корень может иметь класс или идентификатор, подобный следующему:
<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')
Должен быть другой путь, но я его не нашел. Любые предложения очень ценятся.
Если вы хотите выбрать второй li, например
, вы можете использовать дочерний селектор >
с eq
следующим образом:
$('ul#root > ul > li').eq(1)
Для третьего вы устанавливаете eq
на 2
, потому что его индексирование начинается с 0
.
Чтобы перебрать их, вы можете использовать каждый
следующим образом:
$('ul#root > ul > li').eq(1).each(function(){
alert($(this).text());
});
Дополнительная информация:
Как сказано здесь:
jQuery: Найти текст элемента списка, содержащего вложенный 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);
});