Как выбрать только верхнего уровня li в рекурсивном меню?

Question

Как выбрать только li первого уровня? Если я делаю 'ul li', он также выбирает детей. Есть ли способ выбрать только верхний уровень, а не детей с помощью CSS? Если нет, то я согласен с использованием jQuery, но как бы я выбрал его и в этом случае?

<ul>
    <li class="administration first">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first selected"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>

Answer 1

Вам понадобится элемент или класс, который находится выше первого ul, затем укажите {parent-selector} > ul > li.

Answer 2

$ ("ul: first> li").

Answer 3

Если у вашего ul есть класс или ID, вы можете сделать что-то вроде этого:

$('#myList > li')

Answer 4

Вы можете использовать:

$('ul li:not(ul li ul li)')

Это выберет только верхний уровень, но вы также захотите использовать какой-то идентификатор или селектор класса на первом ul, иначе это может помешать содержанию страницы и т. Д.

Answer 5

Быстрое исправление, если возможно, состоит в добавлении имени класса на внешнем ul и выборе с помощью $('ul.myClassName > li').

Другой вариант: $('ul > li:has(ul)') это даст вам все, кроме последнего уровня вложенности.

Answer 6

Как насчет $('ul li').not('ul ul li')
И вы могли бы сделать еще больше, чтобы исключить ul ol li и ol ul li, если вам нужно

Answer 7

$(".analytics:parent > li")

Будет работать для этого конкретного случая, но вам лучше дать верхнему уровню класс или идентификатор.

Что-то вроде:

$("#top-level-ul > li")

Кажется, легче следовать, чемнеобходимость выбора родителя одного из ваших li s

Answer 8

Синтаксис селектора jQuery для parent / child :

$('ul > li')

Дочерний комбинатор (E> F) можно рассматривать как более конкретную форму комбинатора-потомка (E F), поскольку он выбирает только потомков первого уровня.

В имеющейся структуре вам может потребоваться указать родительский элемент ul.

Answer 9

Использование обхода JQuery, который обычно работает лучше:

Учитывая, что это первый UL на странице:

$("ul").first().children();

Учитывая, что родительский элемент имеет идентификатор:

$("#TagID").find("ul").first().children();

Учитывая, что UL имеет класс:

$("ul.myClass").children();

Учитывая, что UL имеет идентификатор:

$("#MyID").children();

Учитывая ваш пример первого LI, имеющего определенный класс:

$("li.administration").parent().children();

Answer 10

Добавьте класс к первому, если есть класс с

  // Add a class to the first UL element      
  $(".wrapper > ul").addClass("first-level");

  // Target the first classes first li child
  $(".wrapper ul.first-level > li:first-child");

У этого есть некоторые проблемы с ie8 и ниже.