jQuery - 通过内部文本查找标签

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5772255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:48:10  来源:igfitidea点击:

jQuery - Find Label By The Inner Text

jquerydomjquery-selectors

提问by Chuck Callebs

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.

我想通过文本找到它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.

如果有人可以提供一些帮助,我将不胜感激。

回答by Caspar Kleijne

use the selector :contains()

使用选择器:contains()

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

The matching text can appear directlywithin 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.

匹配的文本可以直接出现在所选元素中、该元素的任何后代中,或者它们的组合中。与属性值选择器一样,括号内的文本:contains()可以写成裸词或用引号括起来。要选择的文本必须具有匹配的大小写。

回答by Vicente Plata

Maybe

也许

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

according to:

根据:

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

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

or

或者

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

according to

根据

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

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

回答by user1063287

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

这建立在 Caspar 的回答之上,但对于评论来说太大了。

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:

我使用了 Caspar 的解决方案,但发现""任何字符串中都认为存在空字符串,请参阅:

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

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

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

在我的情况下SuperSweetCheckbox是一个动态值,有时是一个空字符串,在这种情况下,我不希望发生任何匹配逻辑。

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

使用创建伪函数match()似乎有效,请参阅:

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

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

You can also use filter(), see:

您还可以使用filter(),请参阅:

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

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

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

下面是三个变量的一个例子- :contains()filter()和一个自定义功能:

jsFiddle

js小提琴

jsFiddle link

jsFiddle 链接

jQuery

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

HTML

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

CSS

CSS

.matched {
background: yellow
}

.notmatched {
background: aqua;
}

回答by morgar

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

我认为:contains()选择器就是你要找的。在此处检查示例 > http://api.jquery.com/contains-selector/

回答by Annamacharya

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

以上指定的所有内容都非常排他性,但也可以尝试一下,如果它不起作用,请告诉我。

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