JQuery - найти ярлык по внутреннему тексту

Мне было интересно, можно ли найти ярлык (или любой элемент, действительно) его внутренним текстом. Например:

<label for="myCheckbox">SuperSweetCheckbox</label>

И я хочу найти его по тексту SuperSweetCheckbox.

Я знаю, что это похоже на противоположную интуицию, но из-за природы приложения, над которым я работаю, это кажется необходимым. Я понимаю, что я могу перебирать каждую из ярлыков, но я бы предпочел избежать этого варианта, если это вообще возможно.

Если бы кто-нибудь мог оказать некоторую помощь, я был бы признателен.

Ответы

Ответ 1

используйте селектор : contains()

 var element = $("label:contains('SuperSweetCheckbox')");

Соответствующий текст может отображаться непосредственно внутри выбранного элемента, в любом из этих потомков элемента или их комбинации. Как и в селекторах значений атрибутов, текст внутри круглых скобок :contains() может быть записан как голые слова или окружен кавычками. В тексте должен быть выбран подходящий случай.

Ответ 3

Я думаю, что селектор :contains() - это то, что вы ищете. Здесь можно проверить образцы http://api.jquery.com/contains-selector/

Ответ 4

Это основано на ответе Caspar, но слишком велико для комментариев.

Я думал, что это может быть полезно для других.

Я использовал решение Caspar, но обнаружил, что пустая строка "" считается существующей в любой строке, см.

fooobar.com/questions/320969/....

В моей ситуации SuperSweetCheckbox - динамическое значение, а иногда и пустая строка, и в этом случае я не хочу, чтобы какая-либо логика соответствия возникала.

Создание псевдофункции с помощью match(), похоже, работает, см.

fooobar.com/questions/52478/....

Вы также можете использовать filter(), см.

fooobar.com/questions/52478/...).

Ниже приведен пример трех вариантов - :contains(), filter() и пользовательской функции:

jsFiddle

jsFiddle link

JQuery

var myString = "Test";

//var myString = "";

// 01.  :contains() - matches empty string as well
$("ul li > label:contains(" + myString + ")").closest("li").addClass("matched").siblings("li").addClass("notmatched");

// 02.  filter()
$("ul li > label").filter(function() {
    return $(this).text() === myString;
}).closest("li").addClass("matched").siblings("li").addClass("notmatched");

// 03.  custom function
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

$("ul li > label:textEquals(" + myString + ")").closest("li").addClass("matched").siblings("li").addClass("notmatched");

HTML

<ul>
<li>
<label>Test</label>
</li>
<li>Oh Nu</li>
</ul>

CSS

.matched {
background: yellow
}

.notmatched {
background: aqua;
}

Ответ 5

Все указанные выше значения являются очень эксклюзивными, но попробуйте также, если он не работает, сообщите мне.

VAR $YesitHas=$("lable").innerText("SuperSweetCheckBox");