Выбор только элементов первого уровня в jquery

Ответ 1

$("ul > li a")

Но вам нужно будет установить класс в корневой строке ul, если вы специально хотите настроить таргетинг на внешнюю ul:

<ul class="rootlist">
...

Тогда это:

$("ul.rootlist > li a")....

Другой способ убедиться, что у вас есть только корневые элементы li:

$("ul > li a").not("ul li ul a")

Он выглядит пухлым, но он должен сделать трюк

Ответ 2

Как только у вас есть начальная ul, вы можете использовать метод children(), который будет учитывать только непосредственные дочерние элементы этого элемента. Как указывает @activa, один из способов легко выбрать корневой элемент - дать ему класс или идентификатор. Далее предполагается, что у вас есть root ul с id root.

$('ul#root').children('li');

Ответ 3

Как указано в других ответах, самым простым методом является уникальная идентификация корневого элемента (по идентификатору или имени класса) и использование прямого селектора потомков.

$('ul.topMenu > li > a')

Однако я столкнулся с этим вопросом в поисках решения, которое будет работать с неназванными элементами на различной глубине DOM.

Это может быть достигнуто путем проверки каждого элемента и обеспечения отсутствия родителя в списке согласованных элементов. Вот мое решение , завернутое в селектор jQuery 'topmost'.

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

Используя это, решение для исходного сообщения:

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

Завершите jsFiddle доступный здесь.

Ответ 4

Возможно, вы захотите попробовать, если результаты по-прежнему перетекают к детям, во многих случаях JQuery будет по-прежнему применяться к детям.

$("ul.rootlist > li > a")

Используя этот метод: E > F Соответствует любому элементу F, который является дочерним элементом элемента E.

Сообщает JQuery смотреть только на явные дети. http://www.w3.org/TR/CSS2/selector.html

Ответ 5

Просто вы можете использовать это.

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

См. пример: https://codepen.io/gmkhussain/pen/XzjgRE

Ответ 6

Вы также можете использовать $("ul li:first-child") только для получения прямых дочерних элементов UL.

Я согласен, вам нужен идентификатор или что-то еще, чтобы определить основной UL, иначе он просто выберет их все. Если бы у вас был div с идентификатором вокруг UL, то проще всего было бы $("#someDiv > ul > li")

Ответ 7

Попробуйте следующее:

$("#myId > UL > LI")

Ответ 8

У меня были проблемы с вложенными классами с любой глубины, поэтому я понял это. Он выберет только первый уровень, с которым он сталкивается, содержащего объект JQuery:

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
  <div id="container">
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
  </div>
</div>

Ответ 9

.add_to_cart >>> .form-item:eq(1)

второй элемент .form на дочернем уровне дерева из файла .add_to_cart