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";

对于那里的过早优化者，如果您不关心它与hello相似，那么您可以使用{来避免调用$和text直接{1}}：

innerHTML

...但是你必须要有一个很多的段落才能解决这个问题，所以很多你可能首先遇到其他问题。： - ）

Answer 2

尝试添加extend伪函数：

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

然后你可以这样做：

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

Answer 3

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

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

Answer 4

所以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;
}

另外，请注意，这个答案非常相似 Select link by text (exact match)

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

Answer 5

我发现了一种适合我的方式。它不是100％精确，但它消除了包含的不仅仅是我正在寻找的单词的所有字符串，因为我检查的字符串也不包含单独的空格。顺便说一句，你不需要这些“”。 jQuery知道你正在寻找一个字符串。确保在：contains（）部分只有一个空格，否则它将无效。

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

是的，我知道如果你有像helloworld

这样的东西，它将不起作用

Answer 6

像T.J. Crowder在上面说过，过滤功能确实很奇妙。在我的具体案例中，它对我不起作用。我需要在div中搜索多个表及其各自的td标记（在本例中为jQuery对话框）。

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

我希望这对某人有帮助！

Answer 7

与alternative libraries结合使用的jQuery单线：

$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');

这等效于jQuery的a:contains("pattern")选择器：

var res = $('a').filter((i, a) => $(a).text().match(/pattern/));

Answer 8

.first（）将在这里提供帮助

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

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

8 个答案: