选择<p> jQuery中没有文本节点的元素</p>

时间:2012-10-30 20:06:00

标签: javascript jquery

我有这个HTML结构:

<div class="article-body">
<p>
    <a href="http://www.example.com">My Link</a>
Lorem Ipsum Dolor Sit amet.

</p>
<p><a href="http://www.example.com">Link that I must select.</a></p>
</div>​

我必须将一个类应用于第二个链接,即没有文本节点的链接。我尝试过“p:empty a”和“p&gt; a:only-child”,但它们不起作用...有一种方法可以使用jQuery选择它吗?

5 个答案:

答案 0 :(得分:7)

无法使用选择器,但您可以使用filter()执行自定义选择:

$('p').filter(function(){
    var $clone = $(this).clone();
    $clone.children().remove();
    return !$clone.text();
}).addClass("red");​

在这里,有一个小提琴:http://jsfiddle.net/adrianonantua/5daYT/

:)

<强>更新

根据@dfsq建议,我们可以利用end()并在同一行中创建相同的逻辑:

$('p').filter(function(){
    return !$(this).clone().children().remove().end().text();
}).addClass("red");​

答案 1 :(得分:3)

filter()的另一个解决方案:

$("p").filter(function() {
    return $(this).contents().filter(function() {
        return this.nodeType == 3 && $.trim(this.nodeValue) != "";
    }).length == 0;
}).addClass("myClass")​;

DEMO: http://jsfiddle.net/wyvLC/

答案 2 :(得分:3)

这将是一个非常快速的解决方案。无需克隆:

$("p > a").filter(function(i, el) {
    return !el.previousSibling && !el.nextSibling;
}).parent();

或者这个:

$("p").filter(function(i, el) {
    return el.firstChild && 
           el.firstChild === el.lastChild && 
           el.firstChild.nodeName.toUpperCase() === "A";
});

答案 3 :(得分:2)

这应该有效http://jsfiddle.net/nvass/

$("p").filter(function(){
    return $.grep(this.childNodes,function(node){
         return node.nodeType === 3 && node.nodeValue.replace(/(\s|\n|\r|\t)/g,"") !== "";
    }).length === 0;
}).css("background-color","green");

答案 4 :(得分:0)

或者您可以使用单行:$("p").filter(function(){ return $(this).clone().children().remove().end().text() == ""; });​ ...

演示:http://jsfiddle.net/bJnEJ/1/

来源(改编):http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/