通过内容的精确匹配来选择元素

好的，我想知道是否有一种方法可以使 :contains() jQuery 的选择器用键入的字符串 只有来选择元素

例如-

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


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

选择器将选择两个 p元素并使它们加粗，但我希望它只选择第一个元素。

131020 次浏览
小开
最佳答案

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

你可以随时使用 filter:

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

虽然不是 选择器，但还是有用的

如果您想在“ hello”之前或之后处理空格，可以在其中添加一个 $.trim:

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

对于那些早熟的优化器，如果你不在乎它不匹配 <p><span>hello</span></p>或类似的，你可以通过直接使用 innerHTML来避免对 $和 text的调用:

return this.innerHTML === "hello";

... 但是你必须有一个 < em > 地段 的段落才有意义，如此之多，你可能会有其他问题第一。:-)

小开

可以使用 jQuery 的 Filter ()函数来实现这一点。

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

这里. first ()将有所帮助

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

尝试添加一个扩展的伪函数:

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

然后你可以做:

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

所以阿曼杜的回答基本奏效。然而，在野外使用它时，我遇到了一些问题，在这些问题上，我原本期望能找到的东西却没有被找到。这是因为有时在元素的文本周围会有随机的空白。我相信，如果您正在搜索“ 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只删除空格 之前和之后搜索的文本。它不会删除单词中间的空格。我相信这是可取的行为，但你可以改变，如果你想要的。

小开

就像 T.J. Crowder 上面所说的，过滤器的功能真的很神奇。在我的特殊情况下，这对我不起作用。我需要在一个 div (在本例中是一个 jQuery 对话框)中搜索多个表及其各自的 td 标记。

$("#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.
}
});

我希望这对某些人有帮助！

小开

我找到了一个适合我的方法。它不是100% 准确，但它消除了所有字符串，包含的不仅仅是我要找的单词，因为我检查字符串不包含单独的空格太。顺便说一句，你不需要这些。JQuery 知道您正在查找字符串。确保您只有一个空格: 包含()部分，否则它将无法工作。

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

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

小开

从 另类图书馆到 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/));

提交答案