jQuery：按文本查找元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7321896/
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
jQuery: find element by text
提问by sisko
Can anyone tell me if it's possible to find an element based on its content rather than by an idor class?
谁能告诉我是否可以根据元素的内容而不是id或class找到元素？
I am attempting to find elements that don't have distinct classes or id's. (Then I then need to find that element's parent.)
我试图找到没有不同类或 id 的元素。（然后我需要找到该元素的父元素。）
回答by Rocket Hazmat
回答by yoav barnea
In jQuery documentation it says:
在 jQuery 文档中它说：
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination
匹配的文本可以直接出现在所选元素中、该元素的任何后代中或组合中
Therefore it is not enough that you use :contains()selector, you also need to check if the text you search for is the direct contentof the element you are targeting for, something like that:
因此，仅使用:contains()selector是不够的，您还需要检查您搜索的文本是否是您所针对的元素的直接内容，例如：
function findElementByText(text) {
var jSpot = $("b:contains(" + text + ")")
.filter(function() { return $(this).children().length === 0;})
.parent(); // because you asked the parent of that element
return jSpot;
}
回答by Morgs
Fellas, I know this is old but hey I've this solution which I think works better than all. First and foremost overcomes the Case Sensitivity that the jquery :contains() is shipped with:
伙计们，我知道这是旧的，但是嘿，我有这个解决方案，我认为它比所有解决方案都有效。首先，最重要的是克服了 jquery :contains() 附带的区分大小写的问题：
var text = "text";
var search = $( "ul li label" ).filter( function ()
{
return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()
Hope someone in the near future finds it helpful.
希望在不久的将来有人会发现它有帮助。
回答by Terry Lin
Rocket's answer doesn't work.
火箭的回答不起作用。
<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>
I simply modified his DEMO hereand you can see the root DOM is selected.
我在这里简单地修改了他的DEMO，你可以看到选择了根DOM。
$('div:contains("test"):last').css('background-color', 'red');
add ":last" selector in the code to fix this.
在代码中添加“ :last”选择器来解决这个问题。
回答by rplaurindo
Best way in my opinion.
在我看来最好的方式。
$.fn.findByContentText = function (text) {
return $(this).contents().filter(function () {
return $(this).text().trim() == text.trim();
});
};
回答by Nicholas Sushkin
The following jQuery selects div nodes that contain text but have no children, which are the leaf nodes of the DOM tree.
下面的 jQuery 选择包含文本但没有子节点的 div 节点，它们是 DOM 树的叶节点。
$('div:contains("test"):not(:has(*))').css('background-color', 'red');<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>