JQuery: как я могу узнать, какой элемент имеет z-индекс при нажатии на ссылку?

Question

Как я могу найти, какой элемент имеет z-индекс, когда вы нажимаете на ссылку? Например,

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-индекс. Если я нажму на ссылку 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-индекс, например:

$("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