Выбор только элементов первого уровня в jquery
как я могу выбрать элементы ссылки только родительского <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
спасибо
10 ответов
$("ul > li a")
но вам нужно будет установить класс в корневом ul, если вы специально хотите нацелиться на самый внешний ul:
<ul class="rootlist">
...
затем:
$("ul.rootlist > li a")....
другой способ убедиться, что у вас есть только корневые элементы li:
$("ul > li a").not("ul li ul a")
это выглядит kludgy, но он должен сделать трюк
Как только у вас есть начальный ul, вы можете использовать дети() метод, который будет рассматривать только непосредственные дочерние элементы. Как указывает @activa, один из способов легко выбрать корневой элемент-дать ему класс или идентификатор. Следующее предполагает, что у вас есть корневой ul с id root
.
$('ul#root').children('li');
как указано в других ответах, самый простой метод-однозначно идентифицировать корневой элемент (по идентификатору или имени класса) и использовать селектор прямого потомка.
$('ul.topMenu > li > a')
однако я столкнулся с этим вопросом в поисках решения, которое будет работать на безымянные элементы at разной глубины дома.
Это может быть достигнуто путем проверки каждого элемента и обеспечения того, что он не имеет родителя в списке сопоставленных элементов. Вот мой решение, завернутый в селектор jQuery "самый верхний".
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 доступен здесь.
вы можете попробовать это, если результаты все еще стекаются к детям, во многих случаях JQuery будет по-прежнему применяться к детям.
$("ul.rootlist > li > a")
используя этот метод: E > F соответствует любому элементу F, который является дочерним элементом элемента E.
говорит JQuery искать только явные дочерние элементы. http://www.w3.org/TR/CSS2/selector.html
просто вы можете использовать это..
$("ul li a").click(function() {
$(this).parent().find(">ul")...Something;
}
см. пример:https://codepen.io/gmkhussain/pen/XzjgRE
вы также можете использовать $("ul li:first-child")
чтобы получить только прямые дети UL.
Я согласен, хотя вам нужен идентификатор или что-то еще, чтобы идентифицировать основной UL, иначе он просто выберет их все. Если бы у вас был div с идентификатором вокруг UL, проще всего было бы сделать$("#someDiv > ul > li")
у меня были некоторые проблемы с вложенными классами из любой глубины, поэтому я понял это. Он выберет только первый уровень, который он встречает содержащего объекта 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>
1
$("ul.rootlist > target-element")
2 $("ul.rootlist").find(target-element).eq(0) (only one instance)
3 $("ul.rootlist").children(target-element)
вероятно, есть много других способов