1

jQuery :contains() 选择器

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

匹配的文本可以直接出现在所选元素中、该元素的任何后代中，或者它们的组合中。

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

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

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

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

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

4

2 回答 2

3

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/

于 2013-08-22T19:52:45.620 回答
2

尝试：

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

jsFiddle 示例

于 2013-08-22T19:49:24.887 回答