jQuery：检查文本是否存在于另一个元素中

使用jQuery，我想检查我点击的链接的文本是否出现在页面上的另一个元素中。 另一个元素中的文本是动态添加的，最初不在页面上。

到目前为止我有这个：

 $（“＃results a”）。live（“click”，function（event）{
     var seed = $（this）.text（）;
     if（$（“＃seeds：has（”+ seed +“）”））{
        警报（“已经拥有它”）;
     }
    其他{
         //其他代码
     }
 }）;

但由于某种原因，即使#seeds

没有#results a链接的文本，我总是得到“已经拥有它”警报。 我究竟做错了什么？

---

更新：使用:contains而不是:has ，正如建议的那样，大部分都有效…除非#seeds包含一个字符串，该字符串是#results锚点中文本的超集。

例如，如果#seeds包含文本Americana且#results锚点的文本是America ，我仍然会收到“已经拥有它”的警告。 我希望警报只显示完全匹配。 这可能吗？

Answer 1

您可以使用:contains()而不是:has() ：

 $("#results a").live("click", function(event){ var seed = $(this).text(); if ($("#seeds:contains(" + seed + ")").length){ alert("already have it"); } else { // other code } }); 

这将检查#seeds元素是否包含单击链接所包含的文本。

如果要查找作为#seeds元素后代的#seeds元素：

 $("#results a").live("click", function(event){ var seed = $(this).text(); if ($("#seeds").find(":contains(" + seed + ")").length){ alert("already have it"); } else { // other code } }); 

这是一个演示： http ： //jsfiddle.net/5wE3p/

请注意，我正在检查返回的元素集的length ，如果没有元素，那么将返回零， if语句将解析为false，如果有任何元素，那么它将truthily解析。

另请注意:contains()区分大小写： http ： //api.jquery.com/contains-selector/

边注

如果您使用的是jQuery 1.4.2或更高版本，则可以使用.delegate()而不是.live() 。 .delegate()的主要好处是你可以选择你的根元素。 因此，例如，如果#results始终存在于DOM中，那么您可以将其用作根元素而不是document元素（这是.live()所做的）：

 //it's this easy to change to `.delegate()` $("#results").delegate("a", "click", function(event){ var seed = $(this).text(); if ($("#seeds").find(":contains(" + seed + ")").length){ alert("already have it"); } else { // other code } }); 

如果将#results动态添加到DOM，那么您可以找到它的父级并将其用作根元素（…只要它在DOM中持久存在）。

更新

如果您只想匹配链接的确切文本，那么您可以遍历#results元素的后代元素并检查每个元素的文本：

 $("#results a").live("click", function(event){ var seed = $(this).text(), found = false; $.each($('#seeds').find('*'), function () { if ($(this).text() == seed) { found = true; } }); if (found){ alert("already have it"); } else { alert('that\'s new'); } return false; });​ 

这是一个演示： http ： //jsfiddle.net/5wE3p/1/

您还可以使用RegExp来匹配值：

 $("#results a").live("click", function(event){ var regexp = new RegExp("^(" + $(this).text() + ")$", "i"), found = false; $.each($('#seeds').find('*'), function () { if ($(this).text().search(regexp) > -1) { found = true; } }); if (found){ alert("already have it"); } else { alert('that\'s new'); } return false; });​ 

这是一个演示： http ： //jsfiddle.net/5wE3p/2/

这里重要的部分是创建RegExp： var regexp = new RegExp("^(" + $(this).text() + ")$", "i") 。 注意i标志，它将RegExp设置为不区分大小写。 ^匹配字符串的开头， $匹配结束，因此查看当前检查的文本是否与搜索词完全相同（除了它不区分大小写）。

Answer 2

使用:contains()而不是:has()并检查length属性，因为jQuery总是给出一个对象。

:has(selector)将selector作为输入，并查找匹配选择器的元素，其中:contains(text)获取文本以检查元素文本内容并选择它们。

 $("#results a").live("click", function(event){ var seed = $(this).text(); if ($("#seeds:contains(" + seed + ")").length){ alert("already have it"); } else { // other code } });