如何检测带有类名为父/最重要的其他类名的元素？

Question

1. 我被赋予类名，如class-1、class-2或class-3
2. 可以有很多类(不一定是3)，但我将知道所有的类名。
3. 我不知道DOM的结构。
4. 我只知道有一个类(这个类的元素)是所有类的父类。

，但我应该如何找到哪个类是父类/最重要的其他已知类?是class-1、class-2还是class-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。

Answer 1

我唯一能想到的就是在数组上循环并选择元素，而不是检查其他两个元素是否存在于其中。父母将是最匹配的。这假设每个元素中只有一个元素。如果有更多的逻辑是必要的。(对于所有可能的结果，我们需要测试用例)

​

var classes = [".class-1", ".class-2", ".class-3"]

var result = classes.reduce((obj, key, i, arr) => {
  const cpy = arr.slice()
  cpy.splice(i,1)
  const count =
    document.querySelector(key)
      .querySelectorAll(cpy.join(","))
        .length
  if (count > obj.count) {
    return { key, count }
  }
  return obj
}, {key:'', count:-1})

console.log(result.key)

    <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>

​

Answer 2

最简单的痛苦方法是从根节点遍历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

Answer 3

如果您使用的是现代浏览器，则可以使用closest查看是否有任何具有其他类的祖先元素。如果没有，那么您已经找到了类中最顶层的元素。这假设DOM中每个类只有一个元素。

基本上，使用reduce可以让我使用函数遍历数组并进行聚合。该函数获取当前类并找到该类的元素。然后获取类数组(除了我们正在测试的类)，并查找当前元素是否有其中一个作为父元素。如果没有，我们就有了最重要的元素。

​

const parent = ["class-1","class-2","class-3"].reduce((agg, cur, idx, arr) => {
  const sut = document.querySelector(`.${cur}`);
  const hasParent = arr.filter(e => e !== cur).some(clas => sut.closest(`.${clas}`) !== null);
  return hasParent ? agg : sut;
}, null);

console.log(parent.className);

    <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>

​