使用 jQuery 定位具有单个子元素且在该子元素之外没有文本节点的元素答案

【问题标题】：Target elements with single child AND no text nodes outside that child, using jQuery使用 jQuery 定位具有单个子元素且在该子元素之外没有文本节点的元素
【发布时间】：2015-09-14 12:07:30
【问题描述】：

使用 jQuery，我试图定位所有仅包含子锚元素（作为直接后代）并且在该子元素之外没有文本节点的段落元素，例如：

<p><a href="http://...">Some link</a></p>

我尝试过 jQuery 的 only-child 选择器，但文本节点显然不被视为子元素。我还查看了contents() 并假设我可以定位开始标记是第一个节点的锚元素。但是，在后者中，我正在构建的网站是其他人将使用 CMS 编写的博客，因此我不能确保他们不会以链接开头的常规段落，这会添加不需要的样式。

我对 jQuery 比较陌生 - 大约一个月。让你知道...

谢谢！

【问题讨论】：

您可以尝试使用.text().length，它返回元素内文本的长度并忽略HTML sn-ps（例如"<i>"）。将此与$.each 循环结合使用，您可以检查每个子节点的text().length

标签： jquery children textnode

【解决方案1】：

Working fiddle

$('p').filter(function() {
  return ( 1 === $(this).find('*').length && 1 === $(this).find('a').length && $(this).text() === $(this).find('a').text() );
});

编辑：我首先不知道:only-child 选择器。有了它，更干净：

$('p').has('a:only-child').filter(function() {
    return $(this).find('a').text() === $(this).text();                  
});

【讨论】：

谢谢，亚历克斯！这正是我正在寻找的。通读几遍，这似乎是一个清晰、合乎逻辑的解决方案。再次感谢！

【解决方案2】：

灵感来自 zeropublix 评论：

$("p").has("a:only-child").filter(function() {
    return $(this).find("a").text() === $(this).text();                  
});

您还可以对其进行原型设计以使您的代码更简洁：

$.fn.onlyChild = function(child) {
   return this.has(child + ":only-child").filter(function() {
        return $(this).find(child).text() === $(this).text();                  
    });
}

Working fiddle.

【讨论】：

非常感谢，安德斯。我需要掌握循环，所以也会玩这个。干杯