jQuery目标父级

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>

我想将“活动”类应用于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 >内，则可以使用以下方法：

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'可能返回了许多结果，而您的代码假定它仅返回了一个结果。 如果要遍历每个元素并测试“活动”，请尝试：

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

Answer 5

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