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

【问题标题】：jQuery: check if text exists in another elementjQuery：检查文本是否存在于另一个元素中
【发布时间】：2012-02-15 19:41:39
【问题描述】：

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

到目前为止，我有这个：

$("#results a").live("click", function(event){ var 种子 = $(this).text(); if ($("#seeds:has(" + 种子 + ")")){ alert("已经有了"); } 别的 { // 其他代码 } });

但由于某种原因，即使#results a 链接的文本不存在于#seeds <div> 中，我总是会收到“已经拥有它”的警报。我做错了什么？

更新：按照建议，使用:contains 代替:has 在大多数情况下都有效...除非#seeds 包含一个字符串，该字符串是#results 锚点中文本的超集。

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

【问题讨论】：

标签： text jquery

【解决方案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 元素的后代的任何元素：

$("#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，如果有任何元素，则解析为 @ 987654333@.

还要注意: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/

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

【讨论】：

谢谢！但这并不适用于所有情况 - 请参阅我更新的问题。

【解决方案2】：

使用:contains() 代替:has() 并检查长度属性，因为jQuery 总是给出一个对象。

:has(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
    }
});

【讨论】：