用于选择具有某个直接子级的标签的 jQuery答案

【问题标题】：jQuery for selecting tags that have a certain immediate child用于选择具有某个直接子级的标签的 jQuery
【发布时间】：2012-05-12 11:12:27
【问题描述】：

如何使用 jQuery 来选择所有 p 标签中至少有一个 a 标签作为直接子标签？

对于文档：

<div>
    <p><a>My Link</a></p>
    <p><div><a>My nested Link</a></div></p>
</div>

它只会返回第一个 p 标签。

【问题讨论】：

【解决方案1】：

~~$('p:has(a)')~~

会成功的。

更新

font 标签的问题可以这样解决：

$('p:has(a):not(:has(font))')

更新 2

好的，放弃所有这些。根据 cmets，:has() 过滤器不仅仅查看直接子代。那么我们换一种方式如何选择所有a 标签，然后选择父标签为p 的标签的父标签。

$('a').parent('p')

或者避免选择所有你可以做的a标签

$('p > a').parent()

又一次更新

感谢@BoltClock 的建议。以下语法也适用：

$('p:has(> a)')

【讨论】：

从技术上讲，这解决了问题，但在我的情况下，我发现标记抛出 jQuery。以下文档使 jQuery 返回两个 p 标签：
My Link

My Link 2
:has 选择器不仅查看直接子元素，还查看与该类型元素匹配的任何后代。这仅在示例 jsFiddle 中有效，因为将 <div> 放在 <p> 中是无效的 HTML，因此 <div>（及其内容）在<p> 的外部呈现。
@AnthonyGrist - 谢谢你的收获。请参阅我的新更新以获取其他解决方案。
我听说您可以将任何组合器与:has() 一起使用，因此它只会查看具有这种关系的任何元素，例如p:has(> a) 应该只检查p 元素与a 子元素.我觉得这种语法很奇怪，如果它有效的话。尤其是看到它没有记录。

【解决方案2】：

我认为您可能必须使用.filter() 来执行此操作。以下代码应该可以满足您的需要：

$('p').filter(function() { return $(this).children('a').length > 0;});

编辑：修改演示以包含有效的 HTML（将 <div> 替换为第二个 <p> 内的 <span>）。

【讨论】：

【解决方案3】：

~~就这么简单：~~

$("div p:first-child")

您可能需要考虑将id 或class 应用于div 以将DOM 遍历限制为仅相关的div 和p 块。

更新抱歉，误读了“第一个 p 标签”位。

试试这个：

$("div p:has(a)")

【讨论】：