Jquery - выбрать немедленный текст li без выделения текста детей ul - PullRequest
Новая
       27

Jquery - выбрать немедленный текст li без выделения текста детей ul

8 голосов
/ 12 августа 2010

Я пытаюсь взять структуру вложенных неупорядоченных списков 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>

Мой вопрос: как я могу выбрать непосредственный дочерний текстовый узел ли, не выделяя текст в дочернем и внуков этого ли (то есть в его подсписках)? Например, учитывая приведенный выше список 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')

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

Ответы [ 3 ]

4 голосов
/ 13 августа 2010

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

jQuery: найти текст элемента списка, который содержит вложенную ul

"Обычные методы DOM позволяют получить доступ к текстовому содержимому только дляone element "

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

$('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);
});
1 голос
/ 12 августа 2010

Если вы хотите выбрать второй 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());
});

Подробнее:

0 голосов
/ 29 марта 2012

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

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