如何使用 jQuery 选择直接包含某些指定文本的元素？答案

【问题标题】：How do I use jQuery to select an element that directly contains some specified text?如何使用 jQuery 选择直接包含某些指定文本的元素？
【发布时间】：2012-03-27 08:07:30
【问题描述】：

如果匹配文本直接出现在选定元素内、该元素的任何后代中或它们的组合中，则 jQuery 选择器 :contains(text) 会选择一个元素。
当且仅当匹配文本直接出现在所选元素中时，我才想选择一个元素。我该怎么办？

例如，

<ul>
    <li id="1">
       <a><img src="la.gif"></a>
       happy birthday 
       <ul><li>radom</li></ul>
    </li>
    <li id="2">
       <a><img src="la.gif"></a>
       sad 
       <ul><li>happy</li></ul>
    </li>
</ul>

我想选择包含单词“happy”的li（如果只有它的后代包含单词“happy”，则不要选择li）。然后只应选择li#1。

以下内容不符合我的要求，因为它将同时选择 li#1 和 li#2：

$('li:contains("happy")');

【问题讨论】：

看到这个答案：stackoverflow.com/a/7896669/830125
jQuery selector for an element that directly contains text?的可能重复
在ul 或ol 中包含除li 之外的任何内容都是无效的HTML。
抱歉，我给出了不好的 html 示例。修复。请查看更新的问题。谢谢。
@user1031868 你能告诉我们上述标记的预期输出是什么吗？

标签： jquery jquery-selectors contains

【解决方案1】：

编辑： 从您更新的代码来看，我认为您需要使用 .contents() 并检查 nodeType 以确保它是一个文本节点，然后将其与文本进行比较需要。

$('ul li').contents().each( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
        $(this).closest('li').css('border', '1px solid red');
    }
});

或使用.filter()，

$('ul li').contents().filter( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
         return true;       
    }
}).closest('li').css('border', '1px solid red');

DEMO

让我知道这是否有效..

ul 应该只包含li 标签.. 如下所示，

<ul>
    <li id="1">happy</li>
    <li id="2">sad <div>happy</div></li>
</ul>

假设你的 html 是这样的，下面是获取第一个列表的脚本，

$('ul li').filter (function () {
    if ($(this).text() == 'happy') return true;
});

.filter 将返回包含文本“happy”的li。

DEMO

【讨论】：

@Niko 你是说选择'
' 吗？可以做到，但这不是一个有效的 ul 构造。
我举了一个不好的例子。请查看更新的问题。我的问题是如果 li 有包含指定文本的后代但 li 本身不直接包含它，我不想选择它。
是的，我不是这个意思，你说得对。但是如果<li> 包含诸如“生日快乐”之类的文字怎么办？ :contains 会选择这个节点，你的过滤器不会。
$(this).text() 将获取所选元素的所有后代的文本。如果所选元素有一个子元素，然后是正确的文本，这仍然会返回该元素。
嗯，我理解不同：节点的文本必须包含这个词，它不需要和它等价。此外，过滤器不得选择像<li><span>happy</span></li> 这样的节点。但你可能是对的。

【解决方案2】：

尝试使用.filter() 进行更具体的检查：

alert(
    $("ul").filter(function(){return $.trim(this.childNodes[0].nodeValue) === "happy"})[0].id
);

它检查每个ul的第一个子节点的nodeValue，看它是否是一个包含“happy”的文本节点。

【讨论】：