时间戳

首页 > 解决方案 > Javascript获取具有特定类的所有祖先

javascript - Javascript获取具有特定类的所有祖先

问题描述

这是用于搜索特定 div 的所有祖先的代码。我怎样才能以找到所有祖先的方式修改该代码，但只能使用特定的类（例如'myclass'）？

 let nodes = [];
 let element = document.getElementById('find');
 nodes.push(element);
 while(element.parentElement) {
     nodes.unshift(element.parentElement);
     element = element.parentElement;
 }

 <div id="n1" class="something">
    <div id="n2" class="myclass">
         <div id="n3" class="something">
             <div id="n4" class="myclass">
                 <button id="find"></button>
             </div>
         </div>
         <div id="n5" class="something">
             <div id="n6" class="myclass">

             </div>
         </div>
     </div>
 </div>

所以在这个例子中，它会找到 id 为 n4 和 n2 的 div

标签： javascript

解决方案

只需检查节点是否具有适当的类，并且仅在存在时才推送它

let nodes = [];
let element = document.getElementById('find');
nodes.push(element);
while (element.parentElement) {
  if (element.parentElement.classList.contains('myclass')) {
    nodes.unshift(element.parentElement);
  }
  element = element.parentElement;
}
console.log(nodes);
<div id="n1" class="something">
  <div id="n2" class="myclass">
    <div id="n3" class="something">
      <div id="n4" class="myclass">
        <button id="find"></button>
      </div>
    </div>
    <div id="n5" class="something">
      <div id="n6" class="myclass">

      </div>
    </div>
  </div>
</div>

推荐阅读