クラス名が親/他のすべてのクラス名の上にある要素を検出するにはどうすればよいですか？

debugcn 投稿 Dev

コーダー

class-1、class-2またはのようなクラス名が付けられていますclass-3
多くのクラス（必ずしも3つではない）が存在する可能性がありますが、私はすべてのクラス名を知っています。
DOMの構造がわかりません。
そして、1つのクラス（このクラスの要素）がすべての親であることを知っています。

しかし、親である/他のすべての既知のクラスの上にあるクラスをどのように見つける必要がありますか？それですか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はありません。

epascarello

私が考えることができるのは、配列をループして要素を選択し、他の2つの要素がその中に存在するかどうかを確認することだけです。親は、最も一致するものになります。これは、それぞれの要素が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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]