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

Question

Как выбрать элементы ссылки только для родителя <ul> из списка, подобного этому?

<ul> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a> 
    <ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 

Таким образом, в CSS ul li a, но не ul li ul li a

Благодаря

Answer 1

$("ul > li a") 

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

<ul class="rootlist"> 
... 

Тогда это:

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

второй .form-элемент на уровне дерева ребенка от .add_to_cart

Answer 5

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

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

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

Рассказывает JQuery только для поиска явных детей. http://www.w3.org/TR/CSS2/selector.html

Answer 6

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

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

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

Это может быть достигнуто путем проверки каждого элемента и обеспечения отсутствия родителя в списке согласованных элементов.Вот мой solution, завернутый в селектор 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 доступны here.

Answer 7

Попробуйте это:

$("#myId > UL > LI") 

Answer 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>

Answer 9

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

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

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