Javascript 用于选择具有某个直接子项的标记的jQuery

如何使用jQuery选择至少有一个a标记作为直接子级的所有p标记

对于该文件：

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

我的链接

我的嵌套链接

它将只返回第一个p标记。

这非常简单：

$("div p:first-child")

您可能需要考虑将<代码> ID <代码>或<代码>类< /代码>应用到<代码> div <代码>中，以将DOM遍历限制为相关的<代码> div 和P块。

，只是在寻找最后一个孩子

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

试试这个：

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

---

我认为您可能必须使用

.filter（）

来完成此操作。以下代码应满足您的需要：

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

编辑：修改演示以包含有效的HTML（在第二个

中用

替换
）。
$（'p:has（a）'））

我会成功的


更新

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

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


更新2

好吧，把这些都扔掉。根据注释，
：has（）
过滤器不只是查看直接的子项。那么我们换一种方式，选择所有
a
标记，然后选择父标记为a
p
的标记的父标记，怎么样

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

或者，为了避免选择所有
a
标记，您可以这样做

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


又一次更新

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

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

这对于问题中的HTML示例来说非常具体，我认为这并不能真正回答问题。对不起，我误读了对第一个p标记的引用。我已经更新了我的答案。使用jQuery选择器内置的过滤器查看我的答案以获得更简洁的版本技术上这解决了问题，但在我的例子中，我发现标记抛出jQuery。下面的文档使jQuery返回两个p标记：My Link
My Link 2
：has
选择器不仅查看直接子元素，还查看与该类型元素匹配的任何子元素。这只适用于示例JSFIDLE，因为将
放在
中是无效的HTML，因此
（及其内容）在
@AnthonyGrist之外呈现-感谢您的关注。请参阅我的新更新以了解另一种解决方案。我听说您可以将任何组合符与
：has（）
一起使用，因此它将只查看具有该关系的元素，例如
p:has（>a）
只应检查具有
a
子元素的
p
元素。但我觉得这种语法很奇怪，如果它有效的话。特别是看到它没有文档化。由于错误的原因，这样的选择器只会返回第一个
p
——在HTML中
p
不能包含
div
，即使您试图通过直接创建相应的DOM元素来强制它。