javascript - Get the parentancestor UL - Stack Overflow

admin管理员组

文章数量:1287858

I have a HTML markup that looks like

<ul>
  ...

    <li>
      <ul class="x">
        ...
        <a href="#"...

How can I get the parent ul.x element from a click event hooked on the link?

this.parentNode works if the UL is the parent element, but if it's one of the ancestors I have to use this.parentNode.parentNode depending on how many parent elements are in between...

Can I somehow get the first UL parent?

I have a HTML markup that looks like

<ul>
  ...

    <li>
      <ul class="x">
        ...
        <a href="#"...

How can I get the parent ul.x element from a click event hooked on the link?

this.parentNode works if the UL is the parent element, but if it's one of the ancestors I have to use this.parentNode.parentNode depending on how many parent elements are in between...

Can I somehow get the first UL parent?

• javascript
• jquery

Share Improve this question Follow asked May 3, 2012 at 12:43 Anna K.Anna K. 2,00566 gold badges2828 silver badges4040 bronze badges 1

• 2 I remend taking an hour to read through the jQuery API, as you're using jQuery. It will save you a lot of time in the long run. Best, – T.J. Crowder Commented May 3, 2012 at 12:46

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Since you've tagged the question as jQuery:

$(this).closest("ul"); //Get the first ancestor `ul`
$(this).closest("ul.x"); //Get the first ancestor `ul` with class `x`

Or, without jQuery (since your example doesn't seem to be using jQuery):

var node = this;
while(node.tagName !== "UL") {
    node = node.parentNode;
}

use closest(). this will get the closest ancestor that matches the selector you provide it.

$(function(){
    $('a').on('click',function(){         //handler of your <a>
        var ulx = $(this).closest('ul.x'); //find the closest ancestor <ul> with class "x"
    });
});

For performance,

You can also use jquery on like below, jquery eventObject also has a property named delegateTarget, which could be useful in your case.

$('ul.x').on('click', 'a', function(e){


    //e.delegateTarget is the parent ul of the clicked a tag
    //e.target.id is the clicked a tag

    alert(e.delegateTarget.id); 
    alert(e.target.id);

});​

HTML:

 <ul id='a' class="x">
      <li><a id='1' href="#">A</a></li>
      <li><a id='2' href="#">B</a></li>
      <li><a id='3' href="#">C</a></li>
 </ul>

 <ul id='b' class="x">
      <li><a id='11' href="#">1</a></li>
      <li><a id='21' href="#">2</a></li>
      <li><a id='31' href="#">3</a></li>
 </ul>​

In terms of performance, you are not binding the event on all the a tags. jQuery suggests this way.

Here is the fiddle.

Usually you would use .closest() like:

$('a').click(function(){    
   var ul = $(this).closest('ul.x'); //or just closest('ul') in case you only used the x for demo purposes
});

This will go up the DOM tree and stop at the first match (your ul.x-element).

if ul.x is direct parent of a use this:

    $('a').on('click',function(){
        var ul = $(this).parent('ul.x');
    });

or

    $('a').on('click',function(){
       var ul = $(this).closest('ul.x');
    });

本文标签： javascriptGet the parentancestor ULStack Overflow