2

我有以下html结构：

<ul>
<li id = "1"><a href = "">1</a></li>
<li id = "2"><a href = "" class = "active">2</a></li>
<li id = "3"><a href = "">3</a></li>
<li id = "1"><a href = "">4</a></li>
</ul>

我想将“活动”类应用于 id 为 2 的 li 元素。我尝试了以下方法：

if(jQuery('#navigation ul li a').hasClass('active')){
jQuery(this).parent().addClass('active');
}

但这似乎不起作用。

4

5 回答 5

4

使用以下内容：

$('#navigation a.active').closest('li').addClass('active');
于 2013-01-07T11:54:38.807 回答
3

在您当前的代码中，您this是无效的 - 没有功能在做这项工作，因此this不会设置为您认为您正在处理的元素。

不要使用.hasClass，而是使用您的选择器来查找匹配的元素。然后，您可以使用.each()迭代每个匹配的元素，this每次正确设置：

jQuery('#navigation ul li a.active').each(function() {
    jQuery(this).parent().addClass('active');
});

这使您的代码与原始代码非常相似。

不过，康斯坦丁的答案更好——它完全避免了手动迭代的需要。作为该答案的变体，如果您确定每个<a>元素都直接包含在<li需要该类的 > 中，则可以使用以下命令：

jQuery('#navigation li > a.active').parent().addClass('active');

注意：您的 ID 字段应该是唯一的，数字 ID 仅在 HTML5 中有效。

于 2013-01-07T11:55:52.290 回答
1

首先，如果您使用 HTML4，您不id应该只是数字，而是以字母开头，例如“id2”。然后只需选择id

$('#id2').addClass('active');
于 2013-01-07T11:54:43.773 回答
0

只需使用：

$('#2').addClass('active');

您的代码不起作用的原因是选择器“#navigation ul li a”可能返回了许多结果，而您的代码假定它只返回一个。如果您想遍历每个元素并测试“活动”，请尝试：

$('#navigation ul li a').each(function() {
  if($(this).hasClass('active')) {
    $(this).parent().addClass('active');
  }
});
于 2013-01-07T11:54:52.053 回答
0 
$(".active").parent().addClass('active')
于 2013-01-07T12:02:33.053 回答