如何用jQuery通过文本内容找到元素?

是的，使用jQuery包含选择器。

2011-09-06 14:55:58

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

演示

(“div: contains美元(“测试”))。css (background-color’,‘红’); 这是一个测试 < div >另一个div < / div > <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js " > < / >

2011-09-06 14:58:23

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

2014-04-01 06:39:58

火箭的回答不管用。

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

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

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

在代码中添加“:last”选择器来修复这个问题。

2015-05-17 18:26:12

在我看来是最好的办法。

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

2015-11-03 19:19:58

伙计们，我知道这很老了，但是我有一个解决办法，我认为它比所有方法都管用。首先克服了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()

希望不久的将来有人会发现它有帮助。

2016-03-17 07:52:15

下面的jQuery选择包含文本但没有子节点的div节点，这些div节点是DOM树的叶节点。

$ (" div:包含(“测试”):不(:有(*))). css(“背景颜色”,“红”); < div > div1 这是一个测试，嵌套在div1</div> <div>嵌套在div1<div> < / div > < div > div2测试这是另一个测试，嵌套在div2</div> <div>嵌套在div2中</div> < / div > < div > div3 < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js " > < /脚本>

2019-10-08 20:55:03

到目前为止，所有答案都不匹配所有包含直接子文本节点的特定元素，该节点包含特定文本。

考虑下面的例子。我们想要找到所有的霍比特人，也就是说，所有包含直接子文本节点的div，该节点包含单词“霍比特人”(包括单词边框，忽略大小写)。

$(function() { const ELEMTYPE = Node.ELEMENT_NODE const TEXTTYPE = Node.TEXT_NODE /* Behaves a bit like Python's os.walk(). The `topdown` parameter is not strictly necessary for this example. */ function* walk_text(root, topdown=true) { const childs = [] const textchilds = [] for (const child of root.childNodes) { const childtype = child.nodeType if (childtype === ELEMTYPE) { childs.push(child) } else if (childtype === TEXTTYPE) { textchilds.push(child) } } if (topdown) { yield [root, textchilds] } for (const child of childs) { yield* walk_text(child, topdown) } if (!topdown) { yield [root, textchilds] } } function* walk_matching(startnode, nodepat, textpat) { for ( [elem, textchilds] of walk_text(startnode) ) { if ( nodepat.test(elem.nodeName) ) { for ( const textchild of textchilds ) { if ( textpat.test(textchild.nodeValue) ) { yield elem break } } } } } // raw dom node let startnode = $('body')[0] // search for element nodes with names matching this pattern ... let nodepat = /^div$/i // ... containing direct child text nodes matching this pattern let textpat = /\bhobbit\b/i for ( const node of walk_matching( startnode, nodepat, textpat ) ) { $(node).css({ border: '1px solid black', color: 'black' }) } }); div { margin:10px 0; padding: 10px; border: 1px solid silver; color: silver; font-style:italic; } div:before { display:block; content: attr(name); font-style:normal; } /* Inserted by SO, we are not interested in it */ body + div { display: none; } <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Find the hobbits</title> </head> <body> <div name='Tolkien'> book writer <div name='Elrond'> elven king <div name='Arwen'>elven princess</div> <div name='Aragorn'>human king, son-in-law</div> </div> <div name='Gandalf'> wizard, expert for hobbits <div name='Bilbo'> old hobbit <div name='Frodo'> young hobbit <div name='Samweis'>best friend hobbit</div> </div> </div> <div name='Gollum'>ex hobbit</div> <div name='Odo'>hobbit</div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </body> </html>

其他答案是(当搜索“霍比特人”时):

Rocket Hazmat给出的答案是:托尔金、甘道夫、比尔博、佛罗多、萨姆维斯、咕噜、厄多摩根的答案是:托尔金 yoav barnea回答道:甘道夫，佛罗多尼古拉斯·苏什金的回答是:山姆维斯，咕噜，厄多 Rocket Hazmat在评论中的回答，Terry Lin的回答，rplurindo的回答:Odo

所有这些答案都是有意义的，这取决于你想做什么。明智的选择，因为Rocket Hazmat的答案，Morgs的答案和Terry Lin的答案比我的解决方案快两倍多。我想这是因为它们不需要遍历整个DOM。大多数使用.filter()的答案执行得非常快。

2021-03-24 05:13:04

如何用jQuery通过文本内容找到元素?

推荐文章

最新文章

标签