Question

使用jQuery，我想选择一个包含完全某种文本的链接。例如：

<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>

我试过这个：

$('a:contains("This One")')

但是它选择了第一个和第二个链接。我只想要第一个链接，其中包含“This One”。我怎么能这样做？

Answer 1

你可以这样做：

$('a').filter(function(index) { return $(this).text() === "This One"; });

参考：http://api.jquery.com/filter/

Answer 2

我的同事扩展了jQuery并具有执行此操作的功能：

$.expr[':'].textEquals = function(a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

结果是您可以通过这种方式选择精确的文字：

$("label:textEquals('Exact Text to Match')");

这很容易，因为您不必每次都记住确切的语法。他的全部帖子都在这里：jQuery Custom Selector for selecting elements by exact text :textEquals

Answer 3

扩展FishBasketGordo的答案。如果您尝试对大量元素进行选择，请先使用:contains()缩小范围，然后应用过滤器。

这将提高整体速度：

$('a:contains("This One")').filter(function(index)
{
    return $(this).text() === "This One";
});

Answer 4

必须修改Nariman的解决方案：

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

否则无法在chrome（Linux）上运行

Answer 5

我正在使用扩展程序

$.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');

只是想分享，以防其他人遇到此事（

Answer 6

如何从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")); - 它将返回下拉列表的值

Answer 7

所以纳尼安的答案非常有效。然而，在野外使用它时，我遇到了一些问题，那些我希望找到的东西都没有找到。这是因为有时元素的文本周围会有随机的空白区域。我相信，如果你正在寻找“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;
}

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

Answer 8

$('a:contains("This One")')[0];

~~我觉得我错过了基于其他人的过滤器的答案，但为什么不选择＆＃39返回的元素数组中的第一个项目？ ;含有＆＃39;？~~

只有当您知道第一个链接具有您正在寻找的完全匹配时，此方法才有效。如果您不确定链接的顺序，其他答案会更好。

Answer 9

var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');

Answer 10

很抱歉，如果这完全符合上述任何人的答案，

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

按文字选择链接（完全匹配）

10 个答案: