jQuery:按文本查找元素


Answers:


432

您可以使用:contains选择器根据元素的内容获取元素。

在这里演示

$('div:contains("test")').css('background-color', 'red');
<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


2
很好,但是区分大小写。无论如何,我们可以进行不区分大小写的搜索吗?
Dipu Raj 2012年

123
@DipuRaj:您必须使用它.filter$('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
火箭Hazmat

5
是的,请使用@RocketHazmat使用的方法,假设您有5个元素都以“注册合同”为前缀,并且每个元素都有一个数字后缀。您最终将全部选择了它们,而实际上您只需要带有文本的元素:'Register Contract 26'
冯火

1
尽管:contains区分大小写,但它对我有用,因为我传递了要查找的确切文本字符串。
弗朗西斯科·昆特罗

1
如果它可以帮助其他喜欢在其parren中使用空格的人,则以下操作将无效$('div:contains( "test" )').css('background-color', 'red');
M Katz

92

在jQuery文档中说:

匹配的文本可以直接出现在所选元素中,该元素的任何后代中或组合中

因此,仅使用:contains() 选择器是不够的,还需要检查搜索的文本是否是您要定位的元素的直接内容,例如:

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

3
刚遇到这个确切的问题。这应该更高。
DickieBoy

2
在以下情况下,此解决方案可能会失败:<li>Hello <a href='#'>World</a>, How Are You. How我认为,如果在这里搜索条件将失败。
me_digvijay

23

Fellas,我知道这很老了,但是我有这个解决方案,我认为它比所有方法都有效。首要的是克服了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()

希望不久的将来有人对您有所帮助。


18

火箭的答案不起作用。

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

我只是在这里修改了他的DEMO,您可以看到选择了根DOM。

$('div:contains("test"):last').css('background-color', 'red');

在代码中添加“ :last ”选择器以解决此问题。


当选择器返回多个结果并且您需要将其范围缩小到没有“ Id”属性可供参考的特定元素时,这种方法效果最佳。
塔希尔·哈立德

14

我认为最好的方法。

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};


4

下面的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>


这是最好的答案!
Calciol '19
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.