jquery: how can i know which element has a z-index when you click on the link?

Question

How can I find which element has a z-index when you click on the link? For instance,

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

If I click the link 1, then the ul has the z-index. If I click the link 3 then return li has it. If I click the link 5 then return a has it.

Is it possible?

I suppose I will use get(0).nodeName to return what node name it is. But the z-index is not on the link itself but on li or ul.

jquery,

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

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

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

});

Then wouldn't this work: `$('.selected').click(function(e){ console.log(this); });` — j08691, Jul 16 '13 at 20:11
Maybe, but I am in the case that I don't know it has the class name of `.selected` in the document.... — Run, Jul 16 '13 at 20:15
@j08691.. shouldn't it be `$('.selected').click(function(e){ console.log($(this).closest('li')); })` — Sushanth --, Jul 16 '13 at 20:15
@lauthiamkok.. If the element does not have the `selected` class then the event will not be fired in the first place — Sushanth --, Jul 16 '13 at 20:16
yea that's why i don't think i can use `.selected` as the starting point... — Run, Jul 16 '13 at 20:18

score 2 · Accepted Answer · answered Jul 16 '13 at 20:30

For starters you would have to add a position to those elements, otherwise they won't have a z-index, and would just return auto.

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

Then you look at the element itself, and then it's parents, to see if any of them has a matching z-index, like so:

$("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: how can i know which element has a z-index when you click on the link?

1 Answers1