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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

Может быть

$('label[value|="SuperSweetCheckbox"]')

в соответствии с:

http://api.jquery.com/attribute-contains-prefix-selector/

или

$("label:contains('SuperSweet')")

в соответствии с

http://api.jquery.com/contains-selector/

Answer 3

Это основано на ответе Каспара, но было слишком большим для комментариев.

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

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

https://stackoverflow.com/a/18399216/1063287.

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

Создание псевдо-функции с использованием match(), кажется, работает, см .:

https://stackoverflow.com/a/18462522/1063287.

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

https://stackoverflow.com/a/15364327/1063287).

Ниже приведен пример трех вариантов - :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;
}

Answer 4

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

Answer 5

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

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