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

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

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

8
задан Gilles 'SO- stop being evil' 3 June 2012 в 17:53
поделиться

2 ответа

Если вы хотите выбрать второй li, например

  • Второй элемент второго уровня , вы можете использовать дочерний селектор > с eq следующим образом:

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

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

    Чтобы перебрать их, вы можете использовать каждый следующим образом:

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

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

  • 1
    ответ дан 5 December 2019 в 23:12
    поделиться

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

    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);
    });
    
    4
    ответ дан 5 December 2019 в 23:12
    поделиться
    Другие вопросы по тегам:

    Похожие вопросы: