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

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锚中文本的超集.

例如,如果#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设置为不区分大小写.此外,^匹配字符串的开头并$匹配结尾,因此查看当前检查的文本是否与搜索项完全相同(除了它不区分大小写).