獲取父/祖先UL

Question

我有一個HTML標記，看起來像

<ul> 
    ... 

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

我怎樣才能得到迷上了鏈接的點擊事件父ul.x元素？

this.parentNode作品如果UL是父元素，但如果這是我必須使用this.parentNode.parentNode取決於元素有多少父母都在的祖先之一...

我可以以某種方式得到的第一個UL父？

Answer 1

出於性能，

你也可以使用如下所示的jquery on，jquery eventObject也有一個名爲delegateTarget的屬性，這對你的情況可能很有用。

$('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>​ 

在性能方面，你是不是對所有的a標籤綁定的事件。 jQuery的建議這種方式。

這裏是fiddle。

Answer 2

使用closest()。這將讓你爲其提供選擇相匹配的最近的祖先。

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

Answer 3

如果ul.x是a使用直接父這樣的：

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

或

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

Answer 4

通常你會使用.closest()像：

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

這樣就上去了DOM樹，並在第一場比賽（你ul.x - 元素）停止。

Answer 5

既然你已經標記了一個問題，jQuery的：

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

或者，沒有jQuery的（因爲你的例子似乎並沒有被使用jQuery）：

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