如何将 class 添加到父 div？

Question

我想根据活动 URL 显示活动菜单项。我有一个菜单，如下面的 HTML 所示。我希望如果单击菜单项，class active 将添加到 .menu_mainitem 元素。

<div class='row' id='main-items'>
  <div class='menu_mainitem'>
    <a href='https://URL.com/index.php?cat=1' class='click-menu'>1</a>
  </div>
  <div class='menu_mainitem'>
    <a href='https://URL.com/index.php?cat=2' class='click-menu'>1</a>
  </div>
  <div class='menu_mainitem'>
    <a href='https://URL.com/index.php?cat=3' class='click-menu'>1</a>
  </div>
</div>

var current = $(location).attr('href');

$('#main-items a').each(function() {
  var $this = $(this);
  if ($this.attr('href').indexOf(current) !== -1) {
    $this.addClass('active'); 
  }
});

不幸的是，这将添加 active class .click-menu 但我想将 class 添加到 .menu_mainitem。我怎样才能做到这一点？

Answer 1

您可以使用 parent() 或 closest('.menu_mainitem') 来获得您需要的 div。我更喜欢后者，它更健壮。

var current = $(location).attr('href');

$('#main-items a').each(function(e) {
  var $this = $(this);
  if ($this.attr('href').indexOf(current) !== -1) {
    $this.closest('.menu_mainitem').addClass('active');
  }
});

另请注意，您可以通过直接使用 toggleClass() 选择 .menu_mainitem 元素来使逻辑更简洁一些，并使用函数来确定子元素 a 符合您的要求。

var current = $(location).attr('href');

$('.menu_mainitem').toggleClass('active', function() {
  return $(this).find('a').attr('href').indexOf(current) !== -1;
});

如何将 class 添加到父 div？

How to add a class to the parent div?

jquery

class

parent