Is there a way to return the top or second parent element of a specified element using JavaScript? - Stack Overflow

admin管理员组

文章数量:1278690

I would like to get the top parent element (section) of a myLI id.

My HTML code is:

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

    </div>
</section>

My code is:

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

My code returns UL but I would like for it to return section.

I would like to get the top parent element (section) of a myLI id.

My HTML code is:

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

    </div>
</section>

My code is:

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

My code returns UL but I would like for it to return section.

• javascript

Share Improve this question Follow edited Nov 1, 2017 at 14:56 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Oct 31, 2017 at 21:36 MaritonMariton 62133 gold badges1414 silver badges2929 bronze badges 7

• 1 How do you know that <section> is the top? Why isn't the parent of <section> the top, or the grandparent, or...? How are you determining top? – Jonathan M Commented Oct 31, 2017 at 21:38
• When you do want this to happen? If it is upon the clicking (or some other event associated with the li), you could just hook the event to the section in the first place. – Scott Marcus Commented Oct 31, 2017 at 22:04
• @JonathanM I know that the section is the top because I would like to go two elements up – Mariton Commented Oct 31, 2017 at 22:06
• @ScottMarcus I will probably have it execute when a user clicks a radio button or on some type of click. – Mariton Commented Oct 31, 2017 at 22:07
• 1 If it's always just three elements up, li.parentElement.parentElement.parentElement it is. – Bergi Commented Nov 1, 2017 at 21:40

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 7

If you want to target the parent by tagName you could use .closest(selector); like :

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

NOTE : Take a look to the Browser patibility section.

Hope this helps.

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>

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>

So I'm assuming you want the element right before the 'BODY' element?

"I will probably have it execute when a user clicks a radio button or on some type of click."

Then just set up the click event on the section elements:

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>

本文标签：