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不在链接本身上，而是在li或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') );
});

FIDDLE

jquery：当你点击链接时，我怎么知道哪个元素有z-index？

1 个答案: