javascript - 用于检查 LI 内容的 jQuery - 根据内容添加特定类 - jQuery 的 $(this) 有问题

Question

我是一个 jQuery 初学者，但我需要为 CMS 的前端设计样式，而更改 HTML 不是一个选项，所以 jQuery 来拯救!我将根据 LI 中的文本向 LI 添加一个类。

我可以使用 jQuery 的 $(this) 对象来获得一些帮助。例如，以下代码有效:

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) {
    $('div.nav ul li:nth-child(2)').addClass("about");
}

但是为了不以指数方式重复我的代码，我宁愿写这样的东西:

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) {
    $(this).addClass("about");
}

然而，这是行不通的。我确信我正在扼杀一些非常明显的东西，但我已经阅读了一些关于 $(this) 对象的教程并且我已经盯着我的代码足够长的时间来寻求一些帮助:)

另外，也许我缺少一个更简单的解决方案。假设我有以下标记。

<ul id="nav">
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>

现在让我们假设这个导航将来可能会改变，所以我不能简单地为每个 LI 分配一个类/图标，只使用 nth-child。有没有一种方法可以循环遍历每个 LI，然后循环遍历每个条件？我对 jQuery 不够熟悉，但在我的英语和 jQuery 组合中，它可能看起来像这样:

loop through #nav:each li {
    if (child:contains("About")').length > 0) {
        $(this).addClass("about");
    }
    if (child:contains("Contact")').length > 0) {
        $(this).addClass("contact");
    }
    if (child:contains("News")').length > 0) {
        $(this).addClass("news");
    }
}

不幸的是，这只是编造的语法!谁能帮我用 REAL jQuery 写这个 :) 如果是这样，我可能会帮助您解决您可能遇到的任何 CSS 问题。

谢谢!

Answer 1

在您的第一个代码片段中，this 没有指向您期望的 DOM 元素，但它主要是执行该代码的实例，因此它不会工作。

您可以使用 $.each 循环并查找每个并应用该类。在这种情况下，您可以看到 $(this) 的使用。

$('#nav > li').each(function(){

    if ($(this).filter(':contains("About")').length > 0) {
        $(this).addClass("about");
    }
    else if ($(this).filter(':contains("Contact")').length > 0) {
        $(this).addClass("contact");
    }
    else if ($(this).filter(':contains("News")').length > 0) {
        $(this).addClass("news");
    }
});