javascript - 如何检测具有类名的元素是父元素/位于所有其他类名称之上?

标签 javascript html dom

  1. 我的类名称为 class-1class-2class-3
  2. 可以有很多类(不一定是 3 个),但我会知道所有类名称。
  3. 我不知道 DOM 结构。
  4. 我只知道有一个类(具有该类的元素)是所有类的父类。

但是我应该如何找到哪个类是父类/高于所有其他已知类?class-1class-2class-3

我有这样的 HTML

    <div>
      <div> Hey nice talking to you </div>
      <div> Hey how are you</div>
      <div><br/></div>
      <div class="class-1">
        <div>Hey, are you there?</div>
        <div class="class-2">
          <div>How was the day</div>
          <div class="class-3"><br/></div>
        </div>
      </div>
    </div>

这是我尝试过的东西

    _findClass_1(html) {
      return Array.from(html.querySelectorAll('.class-1'));
    }

    _findClass_2(html) {
      return Array.from(html.querySelectorAll('.class-2'));
    }

    _findClass_3(html) {
      return Array.from(html.querySelectorAll('.class-3'));
    }

    // Parser
    getNodes(html) {
      const parsers = [
        this._findClass_1,
        this._findClass_2,
        this._findClass_3,
      ];

      let quotedNodes = [];

      for (const parser of parsers) {
        quotedNodes.push(parser(html) || []);
      }

      // How can I detect here which one was the parent of all? 
      return quotedNodes;
    }

你能帮我吗? 请不要使用 jQuery。

最佳答案

最简单但痛苦的方法是从根节点遍历 DOM,并在任何直接子节点等于列表中多个类之一时立即停止。

const class_list = [];

recursion(element) {
  if (element === null) return false;

  // If element has one of the class from the list of class then return element.parentNode

  const children = element.children;
  children.forEach(child => recursion(element));

  return false;
}

通过调用启动进程

const parent_node = recursion(document.getElementById('body'));
if (parent_node) // this is the parent that has all the class element children

关于javascript - 如何检测具有类名的元素是父元素/位于所有其他类名称之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54407589/

相关文章:

Javascript - ScrollToFixed 动态 div id

html - Bootstrap 旋转木马旋转时链接上的字体会发生变化

html - 如何导出我的书签并将它们导入到表格中?

javascript - 如何使用 phonegap 将数组值加载到 iPhone 应用程序中的 TableView 中

javascript - 如何打印 i 的值?

javascript - 通过 JavaScript/DOM 访问 CSS 媒体查询规则

javascript - 选项卡重新加载时如何运行此脚本(chrome 扩展)?

javascript - 为什么我的 chrome 扩展程序不能使用 HTML5 postMessage 与我注入(inject)的框架进行通信?

javascript - 从多个 url 获取模型时如何渲染 View

javascript - 虚拟 DOM 的比较算法是否能够找出唯一的差异并修补真实 DOM?