jQuery选择没有孩子或第一个孩子不是图像的地方答案

【问题标题】：jQuery to select where no children or first child is not imagejQuery选择没有孩子或第一个孩子不是图像的地方
【发布时间】：2010-05-20 23:41:47
【问题描述】：

我正在尝试动态设置页面上的某些元素的样式。所以，如果我有以下代码：

<a href="#">
  Select Me
</a>

<a href="#">
  <img src="blah.jpg" />
  Don't select me
</a>

<a href="#">
 <div>Don't select me either</div>
 <img src="blah.jpg" />
</a>

<a href="#">
  <div>You can select me too.</div>
</a>

我希望它选择第一个和第四个标签。

据我所知，通过使用：

 $("a:first-child")

不会选择第一个标签，因为它没有任何子标签（只是文本）。不应选择第二个标签，例如：

$("a:first-child").not("img)

但是这遗漏了第一项。

编辑：如果 A 元素中的任何位置都有 IMG，请不要选择它。

【问题讨论】：

标签： jquery html jquery-selectors

【解决方案1】：

如果您想选择所有没有图像的链接作为第一个子项，请使用：

$('a:not(:has(> img:first-child))')

如果你想选择所有没有图片的链接，使用这个：

$('a:not(:has(img))')

【讨论】：

我认为这会奏效，但推理它让我头疼。 has 的文档说，如果“其任何后代与选择器匹配”，则包含该元素，但不将其限制为直接后代。如果锚点的直系后代之一中有图像，你知道这是否匹配？
tvanfosson：事实上 has 就是这样工作的，但是正如你所看到的，下一个选择器以 > 开头，表示“孩子”（直系后代）。

【解决方案2】：

假设我已经正确理解了你的问题，

$("a:not(:has(img))");

http://api.jquery.com/not-selector/
http://api.jquery.com/has-selector/

在你下面的 cmets 之后，我最初编写的选择器应该适合你。

【讨论】：

这将跳过图片不是第一个孩子的链接。
@nickf：啊，我确实读错了（看来你也读错了）。
我想他希望只有第一个孩子不能是img。此代码还将过滤 img 不是第一个孩子的 a。
你还好，但再看多一点，我认为这不是问题。我想设置链接的样式，但不设置 A 内有图像的任何内容。我将编辑问题以使其更清晰。
@nickf：不是，对不起，我也误读了你的答案。让我们把它归结为睡眠不足，我会给你的答案 +1 :-)

【解决方案3】：

我没试过，但你应该这样写：

$("a").filter(function() {
    return $(this).filter("> img:first-child").length != 0;
})

它将首先选择所有a，然后过滤具有img作为第一个孩子的a。

更新：
nickf 解决方案绝对更清晰 :-)
我经常忘记 jquery 选择器的通用性。

【讨论】：