Question

我已经尝试了2个多小时来解决这个问题，这让我疯了（jQuery newbie - 抱歉）。

<ul>
    <li>Dog
        <ul>
            <li>Another Dog</li>
            <li>Another Cat</li>
        </ul>
    </li>
    <li>Cat
        <ul>
            <li>I like animals
                <ul>
                    <li>More Dog</li>
                    <li>A Mouse</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我想要做的是寻找“＃34; Cat＆＃34;但只能在顶层LI（忽略孩子）并将css类应用于顶级LI。

例如：

$('ul li:contains("Cat")').addClass('foo');

当我只希望将foo类应用于第二个顶级LI（顶层的Cat文本）时，

会将foo类应用于顶级LI。

注意：这是一个小列表示例。可能有20多个顶级LI，每个都有4个或更多嵌套的UL;所有能够拥有单词Cat的人都需要足够强大以处理扩展的嵌套结构。希望这是有道理的，并提前感谢任何帮助！

Answer 1

需要通过属性标识根父级，为其添加一个类。

<ul class="root">

使用 >- child selector 查找直接/直接的孩子。

选择由“parent”指定的元素“child”指定的所有直接子元素。

$('ul.root > li').filter(function(){
    return this.childNodes[0].nodeValue.trim() === "Cat"
    //This would select text nodes with exact match to Cat.
    //For text containing cat use, return this.childNodes[0].nodeValue.indexOf("Cat")> -1
})

$('ul:not(ul ul) > li').filter...似乎是suggested by Rick

的更好方法

你仍然可以

$('ul > li:contains("Cat")')

但:contains()仍会在儿童中搜索Cat，而不仅仅是实际的li。

Answer 2

如果您愿意在jQuery中使用更多的vanilla，那么您可以执行类似的操作，而无需在现有HTML中添加任何类：

$('ul > li').filter(function (i, e) {
    return (/cat/i).test(e.firstChild.textContent) &&
        (!e.parentNode.parentNode || e.parentNode.parentNode.tagName !== 'LI');
}).addClass('foo');

JSFiddle link

此代码假定您的HTML结构与您发布的内容类似：每个列表项在开头都有文本，可选地后跟无序列表。

它找到无序列表中的所有列表项，然后过滤那些包含“cat”的第一个元素的内容（假定为文本节点），然后检查其父项的父项是否不存在（检查主要是为小提琴，它可能总是存在于实践中）或不是列表项。

如果您希望“cat”检查区分大小写，请将正则表达式更改为/Cat/而不是/cat/i。

Answer 3

迭代1

将您的代码更新为

IComparer

迭代2

这将确保只检查第一级孩子。

然而，它有一个问题。因为你的html中有很多ul - li元素。

所以你需要添加class或id。

所以更新你的html，将id / class添加到第一级ul

$('ul > li:contains("Cat")').addClass('foo');

并且，现在进一步更新你的JS

<ul class="first_list">

迭代3

现在，li：contains将检查li及其子项中的文本Cat。我们需要解决以下问题。

现在，如何只获取忽略子项文本的元素的文本。

嗯，这不是直截了当的。您需要稍微更新一下代码。

 $('ul.first_list > li:contains("Cat")').addClass('foo');

仅在顶级<li>中查找文本并应用课程

3 个答案: