JavaScriptを使用して、指定された要素の先頭または2番目の親要素を返す方法はありますか？

Question

私はmyLI idの一番上の親要素（セクション）を取得したいと考えています。

私のHTMLコードは次のとおりです。

<section> 
    <div> 
     <ul> 
      <li id="myLI">Coffee</li> 
      <li>Tea</li> 
     </ul> 

    </div> 
</section> 

私のコードは次のとおりです。

var x = document.getElementById("myLI").parentElement.nodeName; 

私のコードはULを返しますが、それはsectionを返すようにするために私がしたいと思います。

Answer 1

あなたはtagNameをして、親をターゲットにしたい場合は、次のように.closest(selector);を使用することができます。

var x = document.getElementById("myLI").closest('section'); 

注：ブラウザの互換性セクションに見てください。

これが役に立ちます。

var x = document.getElementById("myLI").closest('section'); 
 

 
console.log(x.tagName);

<section> 
 
    <div> 
 
     <ul> 
 
      <li id="myLI">Coffee</li> 
 
      <li>Tea</li> 
 
     </ul> 
 

 
    </div> 
 
</section>

Answer 2

var topParent = document.getElementById("myLI"); 
 
while(topParent.parentElement.nodeName != 'BODY'){ 
 
    topParent = topParent.parentElement; 
 
    } 
 
    console.log(topParent.nodeName);

<section> 
 
    <div> 
 
     <ul> 
 
      <li id="myLI">Coffee</li> 
 
      <li>Tea</li> 
 
     </ul> 
 

 
    </div> 
 
</section>

だから私は、あなたが正しい 'BODY' 要素の前に要素をしたいと仮定していますか？

Answer 3

"ユーザーがラジオボタンをクリックしたときや、ある種のクリックで実行される可能性があります。"

は、それからちょうどセクション要素にクリックイベントを設定します。

var sections = Array.prototype.slice.call(document.querySelectorAll("section")); 
 

 
sections.forEach(function(section){ 
 
    section.addEventListener("click", function(){ 
 
    console.log(this.id); 
 
    }); 
 
});

<section id="one"> 
 
    <div> 
 
     <ul> 
 
      <li id="myLI">Coffee</li> 
 
      <li>Tea</li> 
 
     </ul> 
 
    </div> 
 
</section> 
 
<section id="two"> 
 
    <div> 
 
     <ul> 
 
      <li id="myLI">Coffee</li> 
 
      <li>Tea</li> 
 
     </ul> 
 
    </div> 
 
</section> 
 
<section id="three"> 
 
    <div> 
 
     <ul> 
 
      <li id="myLI">Coffee</li> 
 
      <li>Tea</li> 
 
     </ul> 
 
    </div> 
 
</section>