使用 jQuery,我想选择一个包含某种文本的链接。例如:
<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>
我试过这个:
$('a:contains("This One")')
但它选择了第一个和第二个链接。我只想要第一个链接,其中包含完全“这个”。我怎样才能做到这一点?
使用 jQuery,我想选择一个包含某种文本的链接。例如:
<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>
我试过这个:
$('a:contains("This One")')
但它选择了第一个和第二个链接。我只想要第一个链接,其中包含完全“这个”。我怎样才能做到这一点?
你可以这样做:
$('a').filter(function(index) { return $(this).text() === "This One"; });
我的一个同事用一个函数扩展了 jQuery:
$.expr[':'].textEquals = function(a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
结果是您可以通过这种方式通过精确文本选择某些内容:
$("label:textEquals('Exact Text to Match')");
这很容易,因为您不必每次都记住确切的语法。他的整个帖子都在这里: jQuery Custom Selector for selection elements by exact text :textEquals
扩展 FishBasketGordo 的答案。如果您尝试在大量元素上进行选择,:contains()
请先使用缩小范围,然后再应用过滤器。
这将提高整体速度:
$('a:contains("This One")').filter(function(index)
{
return $(this).text() === "This One";
});
不得不将 Nariman 的解决方案修改为:
$.expr[':'].textEquals = function(a, i, m) {
var match = $(a).text().match("^" + m[3] + "$")
return match && match.length > 0;
}
否则无法在 chrome (Linux) 上运行
我正在使用扩展程序
$.expr[':'].textEquals
但我发现该实现不再适用于 jQuery 1.7(显然是 Sizzla.filter 中的一个更改)。经过一段时间的努力使其工作后,我简单地编写了一个 jQuery 插件来完成同样的工作。
$.fn.textEquals = function (text) {
var match = false;
$(this).each(function () {
if ($(this).text().match("^" + escapeRegex(text) + "$")) {
match = true;
return false;
}
});
return match;
};
利用:
$(".ui-autocomplete li").textEquals('Exact Text to Match');
只是想分享一下,以防其他人遇到这个(,
$('a:contains("This One")')[0];
我觉得我错过了基于其他人对过滤的回答的一些东西,但为什么不只选择“包含”返回的元素数组中的第一项呢?
只有当您知道第一个链接与您正在寻找的完全匹配时,这才有效。如果您不确定链接的顺序,其他答案会更好。
所以纳尼安的回答效果很好。然而,在野外使用它时,我遇到了一些问题,我期望找到的东西没有被发现。这是因为有时元素的文本周围会有随机的空白。我相信,如果您正在搜索“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 仅删除搜索文本前后的空格。它不会删除单词中间的空格。我相信这是可取的行为,但如果你愿意,你可以改变它。
如何从 drop-dwon 中获取选定的值:
$.fn.textEquals = function (text) {
var match = false;
var values="";
$(this).each(function () {
if ($(this).text().match("^" + text + "$")) {
values=$(this).val();
match = true;
return false;
}
});
return values;
};
console.log($("option").textEquals("Option One"));
- 它将返回下拉列表的值
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
$(link).hide();
$(link).removeAttr('href');
抱歉,如果这与上面任何人的答案完全匹配,
$.fn.equalsText = function (text, isCaseSensitive) {
return $(this).filter(function () {
if (isCaseSensitive) {
return $(this).text() === text
} else {
return $(this).text().toLowerCase() === text.toLowerCase()
}
})
}
这是 Linkedin 搜索结果页面控制台中的一些输出。
$("li").equalsText("Next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("Next >", true)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", true)
[] // Output
它也有区分大小写的支持,并且没有使用:contains()
编辑(2017 年 5 月 22 日):-
$.fn.equalsText = function (textOrRegex, isCaseSensitive) {
return $(this).filter(function () {
var val = $(this).text() || this.nodeValue
if (textOrRegex instanceof RegExp) {
return textOrRegex.test(val)
} else if (isCaseSensitive) {
return val === textOrRegex
} else {
return val.toLowerCase() === textOrRegex.toLowerCase()
}
})
}