如何选择一个没有里面的链接元素?

鉴于这种HTML:

<ul> <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li> <li><a href="/artists/gil_elvgren/likes">Likes</a></li> <li>Favorites</li> <li><a href="/artists/gil_elvgren/follows">Follows</a></li> <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li> </ul>

我想将注入class="current"到一个没有里面的链接单行项。

我如何使用jQuery查找不包含子元素?

--------------解决方案-------------

选择<li>元素没有<a>使用孩子:has:not选择:

$("li:not(:has(a))").addClass("current");

的jsfiddle

-编辑-

虽然这可能是最短的解决方案,可读性之外,这绝不是在问候的速度最好的之一。

考虑到这一点,我会建议您检查由@bazmegakapa提供了一个很好的答案。

因为这是你(或其他人包括我在内)可能最终会使用一次以上,我已经扩大jQuery的有点有了这个插件/方法,你可以使用以便干你的代码:

jQuery.fn.thatHasNo = function(element, method) {
if (typeof method === "undefined" || method === null) method = "children";
return this.not(function() {
return $(this)[method](element).length;
});
};

您可以与拨打:

$("li").thatHasNo("a").addClass("current");

本扩展,默认情况下(如果第二个参数的方法不通过),检查是否有任何直接的后代(子)那场比赛提供的选择。 但是,您可以提供任何树遍历参数作为第二个参数的方法。 所以,这可以写为以下任一:

$("li").thatHasNo("a", "children").addClass("current");
//...
$("li").thatHasNo("a", "find").addClass("current");
//...
$("li").thatHasNo(".class", "siblings").addClass("lame");

我已经更新的jsfiddle以反映。

您应该使用的.not()方法(这基本上是否定的.filter()具有过滤功能。

$('li') /* select the elements you want to test */
.not(function () { /* run a filter function on them */
/* those that have a direct children link (use find() if you need
any kind of children) will return true thus excluded */
return $(this).children('a').length;
})
.addClass('current'); /* add our beloved class */

的jsfiddle演示



你也可以使用复杂的选择,因为@Krule建议,但我觉得它的可读性,甚至在jQuery的手册:不()警告反对:

的。不能()方法将最终为您提供更可读的选择不是推开复杂的选择或变量成:不()选择滤波器。 在大多数情况下,这是一个较好的选择。

此外, :has()是不是真的建议,以及:

这是因为:有()是一个jQuery的扩展,而不是CSS规范的一部分,使用查询:有()不能利用由本机DOM querySelectorAll()方法提供的性能提升。 对于在现代浏览器更好的性能,使用$(“你-纯CSS选择器”)。有(选择/一个DOMElement)代替。

$("li").each(function(){
if($(this).children().length == 0){
//found current..
$(this).addClass("current");
}
});

我建议你只需要添加一个<span>元素中的的<li>到在他们链接的元素之间的区别开来。

<ul>
<li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li>
<li><a href="/artists/gil_elvgren/likes">Likes</a></li>
<li><span>Favorites</span></li>
<li><a href="/artists/gil_elvgren/follows">Follows</a></li>
<li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li>
</ul>

CSS:

ul li a { /* Link CSS */ }
ul li span { /* Current CSS */ }

分类:jQuery的 时间:2015-03-15 人气:3
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.721 (s). 10 q(s)