如何在javascript中将类添加到父级?

rob*_*b.m 5 javascript

不是jQuery,因为我只是$("this").parent().addClass("active");在纯粹的javascript中.这是因为我不想在以下代码中混淆Javascript和jQuery:

var clickedPath = this.getElement(); 
clickedPath.classList.add("active"); 
var classes = clickedPath.getAttribute('class').match(/\d+/g) || []; 
buttons.forEach(function(btn) { 
    var method = classes.indexOf(btn.getAttribute('data-date')) > -1 ? 'add' : 'remove'; 
    btn.classList[method]('active');
    //btn.parent().addClass("active");
});
Run Code Online (Sandbox Code Playgroud)

UPDATE

这是添加类之前的HTML启动案例:

<ul>
  <li>1500</li>
  <li>1400
      <ul>
        <li>1401</li>
      </ul>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我们有两种情况:

  • 1500是单身,没有孩子
  • 1400有一个孩子1401

如果我将类添加active到1500,那很好,我可以使用答案中提供的代码:

btn.parentNode.classList[method]('active');
Run Code Online (Sandbox Code Playgroud)

但是如果我将类添加到1401,那么1400也应该有它,所以以下是两种情况:

<ul>
  <li class="active">1500</li>
  <li>1400
      <ul>
        <li>1401</li>
      </ul>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

要么

<ul>
  <li>1500</li>
  <li class="active">1400
      <ul>
        <li class="active">1401</li>
      </ul>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

und*_*ned 14

你提到"我不想在下面的代码中混淆js和jQuery"但你实际上是在混合vanilla DOM API和jQuery方法..parent并且.addClass是jQuery函数.你可以编码:

btn.parentNode.classList.add("active");
Run Code Online (Sandbox Code Playgroud)


Bar*_*rdy 6

还可以考虑parentElement替代parentNode

btn.parentElement.classList.add("active");
Run Code Online (Sandbox Code Playgroud)