鉴于此
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");
– 编辑 –
虽然这可能是最短的解决方案,除了可读性之外,它绝对不是速度方面最好的解决方案.
考虑到这一点,我建议你检查@bazmegakapa提供的一个很棒的answer.
由于这是你(或包括我在内的任何人)可能不止一次使用的东西,我已经使用这个插件/方法扩展了jQuery,你可以使用DRY你的代码:
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");
默认情况下(如果未传递方法的第二个参数),此扩展将检查是否存在与提供的选择器匹配的任何直接后代(children).但是,您可以提供任何tree-traversal parameter作为方法的第二个参数.因此,这可以写成以下任一项:
$("li").thatHasNo("a","children").addClass("current"); //... $("li").thatHasNo("a","find").addClass("current"); //... $("li").thatHasNo(".class","siblings").addClass("lame");
我已更新jsFiddle以反映这一点.