jquery：當我點擊鏈接時，如何知道哪個元素具有z-index？

Question

當點擊鏈接時，如何查找哪個元素具有z-index？例如，

HTML，

<ul class="selected"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
</ul> 

<ul> 
    <li class="selected"><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
</ul> 

<ul> 
    <li><a href="#" class="selected">5</a></li> 
    <li><a href="#">6</a></li> 
</ul> 

CSS，

.selected { 
    z-index:10; 
} 

如果我點擊鏈接，則ul擁有的z-index。 如果我點擊鏈接然後返回li有它。 如果我點擊鏈接然後返回a有它。

可能嗎？

我想我會用get(0).nodeName返回它的節點名稱。但Z指數不在鏈路本身，而是在li或ul。

jQuery的，

$("a").click(function(){ 

    var zindex = parseInt($(this).css("zIndex"), 10); 

    if(zindex) alert($(this).get(0).nodeName); 

}); 

Answer 1

對於你將有一個位置添加到這些元素首發，否則他們不會有z-index的，並且將只返回汽車。

.selected { 
    z-index : 10; 
    position: relative; 
} 

那你看看元素本身，然後它的父母，看看其中是否有匹配的z-index，像這樣：

$("a").on('click', function(e){ 
    e.preventDefault(); 
    var Zidx = 10, 
     closest = null; 

    $(this).parents().addBack().each(function() { 
     if (parseInt($(this).css('z-index'), 10) === Zidx) { 
      closest = this; 
      return false; 
     } 
    }); 

    if (closest) alert($(closest).prop('tagName')); 
}); 

FIDDLE