通过其内容的完全匹配选择元素

Question

好吧,我想知道是否有办法让:contains()jQuery的选择器选择只有输入字符串的元素

例如 -

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

选择器将选择两个p元素并使它们变为粗体,但我希望它只选择第一个元素.

Answer 1

不,没有jQuery(或CSS)选择器可以做到这一点.

你可以随时使用filter:

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

它不是一个选择器,但它完成了这项工作.:-)

如果你想在"你好"之前或之后处理空格,你可以$.trim在那里扔一个:

return $.trim($(this).text()) === "hello";

对于那里的过早优化器,如果你不关心它不匹配<p><span>hello</span></p>和类似,你可以避免直接使用$和直接text使用innerHTML:

return this.innerHTML === "hello";

...但是你必须要有很多段落才能解决这个问题,所以很多你可能先遇到其他问题.:-)

Answer 2

尝试添加一个extend伪函数:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

然后你可以这样做:

$('p:textEquals("Hello World")');

Answer 3

所以Amandu的回答大多有效.然而,在野外使用它时,我遇到了一些问题,那些我希望找到的东西都没有找到.这是因为有时元素的文本周围会有随机的空白区域.我相信,如果你正在寻找"Hello World",你仍然希望它能匹配"Hello World",甚至是"Hello World \n".因此,我刚刚将"trim()"方法添加到函数中,该函数删除了周围的空白,并且它开始更好地工作.

特别...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

另外,请注意,此答案与按文本选择链接非常相似 (完全匹配)

次要注释... trim仅删除搜索文本之前和之后的空格.它不会删除单词中间的空格.我相信这是理想的行为,但如果你愿意,你可以改变它.

Answer 4

您可以使用jQuery的filter()函数来实现此目的.

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

Answer 5

我找到了一种适合我的方法。它不是 100% 准确，但它消除了所有包含的不仅仅是我正在寻找的单词的字符串，因为我检查了不包含单个空格的字符串。顺便说一下，您不需要这些“”。jQuery 知道您正在寻找一个字符串。确保 :contains( ) 部分中只有一个空格，否则它将不起作用。

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

是的，我知道如果你有类似的东西它不会工作 <p>helloworld</p>