通过其内容的精确匹配来select元素
好吧,我想知道是否有一种方法可以使:contains()
jQuery的select器只selectinputstring的元素
例如 –
<p>hello</p> <p>hello world</p> $('p:contains("hello")').css('font-weight', 'bold');
select器将select这两个p
元素,并使他们粗体,但我希望它只select第一个。
不,没有这样做的jQuery(或CSS)select器。
你可以随时使用filter
:
$("p").filter(function() { return $(this).text() === "hello"; }).css("font-weight", "bold");
这不是一个select器 ,但它做的工作。 🙂
如果你想处理“hello”之前或之后的空白,你可以在这里$.trim
一个$.trim
:
return $.trim($(this).text()) === "hello";
对于那些不成熟的优化器,如果你不在意它不匹配<p><span>hello</span></p>
等,你可以直接使用innerHTML
避免对$
和text
的调用:
return this.innerHTML === "hello";
…但是你必须要有很多的段落才能做到这一点,所以你可能会先遇到其他的问题。 🙂
尝试添加一个扩展伪函数:
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().match("^" + arg + "$"); }; });
那你可以这样做:
$('p:textEquals("Hello World")');
你可以使用jQuery的filter()函数来实现这一点。
$("p").filter(function() { // Matches exact string return $(this).text() === "Hello World"; }).css("font-weight", "bold");
所以阿曼杜的答案大多是有效的。 然而,在野外使用它,我遇到了一些问题,我预计会发现的东西没有find。 这是因为有时在元素的文本周围会有随机的空白。 我相信,如果你正在寻找“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链接的文字(完全匹配)
而辅助笔记… trim
仅删除search到的文本前后的空格。 它不会删除单词中间的空格。 我相信这是可取的行为,但如果你愿意,你可以改变。
就像上面提到的TJ Crowder一样,filter的function确实不错。 在我的具体情况下,这不适合我。 我需要search多个表和它们各自的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. } });
我希望这对某人有帮助!
.first()将在这里帮助
$('p:contains("hello")').first().css('font-weight', 'bold');