Question

jQuery：contains（）选择器

http://api.jquery.com/contains-selector/

匹配的文本可以直接显示在所选元素中任何元素的后代，或其组合。

如何在任何元素的后代中省略具有匹配文本的元素。我只想获得匹配文本直接出现在所选元素中的元素。

在下面的示例中，我只希望包含单词“Red”的跨度为红色文本。

<span>Green
    <span>Red</span>
</span>
<span>Red</span>

jQuery("span:contains('Red')").css("color","red");

http://jsfiddle.net/UNydR/2/

Answer 1

jQuery没有提供内置的方法来处理这个问题。您必须遍历子文本节点并手动搜索字符串：

$('span').each(function () {
    var span = this;
    $.each(span.childNodes, function () {
        if (this.nodeType == 3 && this.nodeValue.indexOf('Red') >= 0 ) {
            $(span).css('color', 'red');
            return false;
        }
    });
});

这是小提琴：http://jsfiddle.net/TEnX7/

如果你发现你经常使用它，并且你不想一直写出来，你可以创建自己的自定义过滤器表达式：

jQuery.expr[':']['contains-direct'] = $.expr.createPseudo(function(text) {
    return function (elem) {
        var contains = false;
        $.each(elem.childNodes, function () {
            if (this.nodeType == 3 && this.nodeValue.indexOf(text) >= 0 ) {
                contains = true;
                return false;
            }
        });
        return contains;
    }
});

然后你就可以直接在你的代码中使用它了，就像jQuery的contains：

$('span:contains-direct(Red)').css('color', 'red');

这是小提琴：http://jsfiddle.net/F9xZ8/

Answer 2

尝试：

jQuery("span:contains('Red')").filter(function () {
    return ($(this).text() == 'Red')
}).css("color", "red");

<强> jsFiddle example

jQuery：contains - 排除后代中的匹配文本

2 个答案: