jQuery - Find Label By The Inner Text

问题:

I was wondering if it was possible to find a label (or any element, really) by it's inner text. For example:

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

And I want to find it by the text SuperSweetCheckbox.

I know this seems kind of counter-intuitive, but due to the nature of the app I'm working on it seems to be necessary. I realize that I can iterate through each of the labels but I'd prefer to avoid that option if at all possible.

If anyone could provide some assistance, I'd appreciate it.

回答1:

use the selector :contains()

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

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.

回答2:

Maybe

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

according to:

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

or

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

according to

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

回答3:

This builds on Caspar's answer, but was too big for comments.

I thought it could be useful for others.

I used Caspar's solution but found that an empty string "" is considered to exist in any string, see:

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

In my situation SuperSweetCheckbox is a dynamic value and sometimes an empty string, in which case I don't want any matching logic to occur.

Creating a pseudo function using match() seems to work, see:

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

You can also use filter(), see:

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

Below is an example of the three variants - :contains(), filter() and a custom function:

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

回答4:

I think the :contains() selector is what you are looking for. Check samples here > http://api.jquery.com/contains-selector/

回答5:

All the Above specified is very exclusive, but try out this too, if its not working let me know.

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