Как выбрать только верхний уровень 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>

Ответ 1

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

Ответ 2

$( "ul: first > li" ).

Ответ 3

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

$('#myList > li')

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

$('ul > li')

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

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

Ответ 7

$(".analytics:parent > li")

Будет работать в этом конкретном случае, но вам лучше дать верхний уровень классу или id.

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

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

Намного проще следовать, чем выбрать родителя одного из li s

Ответ 8

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

Ответ 9

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

  // 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 и ниже.

Ответ 10

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

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

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

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

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

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

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

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

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

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

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

Ответ 11

$('ul li: first')