jQuery来检查LI的内容 - 添加基于内容的特定类 - 麻烦与jQuery的$（this）

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

现在让我们假设这个导航可能会在未来改变，所以我不能简单地指定一个类/图标，每个L1利用只不过是第n个孩子。有没有一种方法可以循环遍历每个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问题。

谢谢！

来源

2012-01-17 LearnWebCode

您不需要遍历li元素。使用您发布的样本标记，您可以向关于li元素添加类。

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

冲洗并重复两次，其他两个项目。

$('#nav li:contains(Contact)').addClass('contact') 
$('#nav li:contains(News)').addClass('news')

来源

2012-01-17 19:37:26 Anurag

哦哇，太棒了！这样紧凑的代码和它完成工作一样，谢谢！ – LearnWebCode 2012-01-17 19:57:14

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

来源

2012-01-17 19:37:10 ShankarSangoli

非常感谢！这正是我所期待的！ – LearnWebCode 2012-01-17 19:56:43

如果此答案解决了您的问题，请将其标记为接受的答案。 – mccow002 2012-01-18 15:50:33

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

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

来源

2012-01-17 19:37:26 mccow002

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

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

来源

2012-01-17 19:39:08 swatkins

为元方法+1。 – Anurag 2012-01-17 20:04:56

jQuery来检查LI的内容 - 添加基于内容的特定类 - 麻烦与jQuery的$（this）

回答

相关问题