Question

鉴于此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查找不包含子元素的元素？

Answer 1

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

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

jsFiddle

- 编辑 -

虽然这可能是最短的解决方案，除了可读性之外，它绝对不是速度方面的最佳解决方案。

考虑到这一点，我建议您查看由answer提供的精彩@bazmegakapa。

由于这是你（或包括我在内的任何人）可能不止一次使用的东西，我使用这个插件/方法扩展了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以反映这一点。

Answer 2

你应该使用.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 Demo

你也可以使用复杂的选择器，@Krule suggested，但我发现它不太可读，甚至jQuery manual on :not()警告它：

.not（）方法最终会为您提供更多可读性选择而不是将复杂的选择器或变量推送到：not（）选择器过滤器在大多数情况下，这是一个更好的选择。

此外，我也不建议使用:has()：

因为：has（）是一个jQuery扩展而不是CSS的一部分规范，查询使用：has（）无法利用本机DOM querySelectorAll（）提供的性能提升方法。要在现代浏览器中获得更好的性能，请使 $（“your-pure-css-selector”）。而是（selector / DOMElement）。

Answer 3

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

Answer 4

我建议您只在<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 */ }

如何选择里面没有链接的元素？

4 个答案: