jquery - 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;
}

如果我单击链接1，则ul具有 z-index。如果我单击链接3，则返回li它。如果我单击链接5，则返回a有它。

可能吗？

我想我会用get(0).nodeName它来返回它是什么节点名称。但是 z-index 不在链接本身上，而是在lior上ul。

jQuery,

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

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

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

});

Answer 1

对于初学者，您必须为这些元素添加一个位置，否则它们将没有 z-index，并且只会返回 auto。

.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') );
});

小提琴