6

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

4

4 回答 4

8

使用and选择器选择<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");

默认情况下（如果未传递方法的第二个参数），此扩展将检查是否有任何直接后代（children）与提供的选择器匹配。但是，您可以提供任何树遍历参数作为方法的第二个参数。因此，这可以写成以下任一形式：

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

我已经更新了 jsFiddle以反映这一点。

于 2011-12-29T21:59:13.980 回答
1

您应该使用带有过滤器功能的.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 建议的那样，您也可以使用复杂的选择器，但我发现它的可读性较差，甚至:not() 上的 jQuery 手册也警告过它：

.not() 方法最终将为您提供比将复杂的选择器或变量推入 :not() 选择器过滤器更易读的选择。在大多数情况下，这是一个更好的选择。

另外，:has()也不是很推荐：

因为 :has() 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :has() 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 $("your-pure-css-selector").has(selector/DOMElement) 。

于 2011-12-29T22:09:27.087 回答
0 
$("li").each(function(){
    if($(this).children().length == 0){
        //found current..
        $(this).addClass("current");
    }
});
于 2011-12-29T21:57:05.950 回答
-1

我建议您只需<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 */ }
于 2011-12-29T21:57:59.673 回答