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

时间:2015-09-14 12:07:31

标签: jquery children textnode

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

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

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

我对jQuery相对较新 - 大约一个月。只是你知道......

谢谢!

2 个答案:

答案 0 :(得分:2)

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();                  
});

答案 1 :(得分:1)

受到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