Question

我有以下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>

我想将“active”类应用于id为2的li元素。我尝试了以下内容：

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

但它似乎不起作用。

Answer 1

使用以下内容：

$('#navigation a.active').closest('li').addClass('active');

Answer 2

在您当前的代码中，您的this无效 - 没有执行此功能的功能，因此this未设置为您认为正在处理的元素。

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

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

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

然而，康斯坦丁的答案更好 - 它避免了手动迭代的需要。作为该答案的变体，如果您确定每个<a>元素都直接包含在<li＆gt;内。需要课程，你可以使用这个：

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

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

Answer 3

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

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

Answer 4

只需使用：

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

你的代码不起作用的原因是因为选择器'#navigation ul li a'可能返回了很多结果，而你的代码假设它只返回一个。如果您想迭代每个元素并测试'active'，请尝试：

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

Answer 5

$(".active").parent().addClass('active')

jQuery目标父级

5 个答案: