jQuery - Buscar etiqueta por el texto interno

Question

Me preguntaba si era posible encontrar una etiqueta (o cualquier elemento, realmente) por su texto interno. Por ejemplo:

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

y quiero encontrarlo por el texto SuperSweetCheckbox.

Sé que esto parece un poco contra-intuitivo, pero debido a la naturaleza de la aplicación en la que estoy trabajando parece ser necesario. Me doy cuenta de que puedo repetir cada una de las etiquetas, pero preferiría evitar esa opción si es posible.

Si alguien pudiera proporcionar algo de ayuda, se lo agradecería.

Answer 1

uso el selector :contains()

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

La coincidencia de texto puede aparecer directamente dentro del elemento seleccionado, en cualquiera de descendientes que del elemento, o una combinación de los mismos. Al igual que con los selectores de valores de atributo, el texto dentro de los paréntesis de :contains() se puede escribir como palabras simples o rodeado de comillas. El texto debe tener una coincidencia de caso para ser seleccionado.

Answer 2

Creo que el selector :contains() es lo que estás buscando. Verificar muestras aquí>http://api.jquery.com/contains-selector/

Answer 3

Tal

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

acuerdo con:

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

o

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

acuerdo con

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

Answer 4

Todo lo anterior es muy exclusivo, pero prueba esto también, si no funciona, házmelo saber.

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

Answer 5

Esto se basa en la respuesta de Caspar, pero era demasiado grande para los comentarios.

Pensé que podría ser útil para otros.

que utiliza la solución de Caspar, pero encontraron que una cadena vacía "" Se considera que existe en cualquier cadena, véase:

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

En mi situación SuperSweetCheckbox es un valor dinámico y, a veces una cadena vacía, en cuyo caso no quiero que se produzca ninguna lógica coincidente.

Creación de una función seudo usando match() parece que funciona, consulte:

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

También puede utilizar filter(), consulte:

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

A continuación se muestra un ejemplo de las tres variantes - :contains(), filter() y una función personalizada:

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; 
}