jQuery检查LI's content-基于内容添加特定类-jQuery出现问题's$(这个）

jQuery to check LI's content - add specific class based on content - trouble with jQuery's $(this)

本文关键字：-jQuery 问题 这个 添加 content- LI 检查 于内容 jQuery      更新时间：2023-09-26

我是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>

现在让我们假设这个导航在未来可能会改变，所以我不能简单地只使用第n个子项为每个LI分配一个类/图标。有没有一种方法可以循环通过每个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");
    }
}

不幸的是，这只是虚构的语法！有人能帮我在REALjQuery中写这篇文章吗？）如果是的话，我可能会帮你解决你可能遇到的任何CSS问题。

谢谢！

在您的第一个代码片段中，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");
    }
});

$（this）仅适用于函数。它是对调用函数所针对的元素的引用。if语句不是函数，因此，if不适用。相反，您可以进行变量缓存，如下所示：

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

jQuery each（）函数允许您遍历集合。$（this）对象将引用迭代中的当前元素。假设你的类总是与内容匹配，那么这段代码就可以工作了。否则，您可以为类创建一个switch语句。

$("ul#nav li").each(function(){
    var txt = $(this).text();
    $(this).addClass(txt.toLowerCase());
});

您不需要在li元素上循环。使用您发布的示例标记，以下是如何向About li元素添加类的方法。

$('#nav li:contains(About)').addClass('about')

对于另外两个项目，冲洗并重复两次。

$('#nav li:contains(Contact)').addClass('contact')
$('#nav li:contains(News)').addClass('news')
相关文章：