Как добавить класс в родительский div? - PullRequest
Новая
       25

Как добавить класс в родительский div?

1 голос
/ 21 марта 2019

Я хочу показать активный пункт меню на основе активного URL.У меня есть меню, как в HTML ниже.Я хочу, чтобы при нажатии на пункт меню класс 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 .click-menu, ноЯ хочу добавить класс к .menu_mainitem.Как мне этого добиться?

1 Ответ

2 голосов
/ 21 марта 2019

Вы можете использовать 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');
  }
});

Также обратите внимание, что вы можете сделать логику более лаконичной, выбрав элементы .menu_mainitem, непосредственно используя toggleClass() с функцией, чтобы определить, соответствует ли href дочернего элемента a вашим требованиям. 

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

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