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 преобразуется в ложь, если есть какие-либо элементы, он разрешает truthily.

Также обратите внимание, что :contains() чувствителен к регистру: http://api.jquery.com/contains-selector/

Side-Note

Если вы используете 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
    }
});