Question

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

到目前为止，我有这个：

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

但由于某些原因，即使#results a #seeds中没有<div>链接的文字，我也始终会收到“已经拥有”提醒。我做错了什么？

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

例如，如果#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元素后代的任何元素：

$("#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()并检查长度属性，因为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
    }
});

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

2 个答案:

边注

更新