Select DIV with highest z-index

Question

Example code so I can start explaining this problem:

<div style="z-index:5">5</div>
<div style="z-index:2">2</div>
<div style="z-index:1">1</div>
<div style="z-index:4">4</div>
<div style="z-index:3">3</div>

(z-index values do not matter, and their order, even less. Just example code)

Problem: I want to select (either using CSS or JS with jQuery) the DIV with highest z-index value. In the case above, I want to select the first one, because it's z-index 5 is higher than all the others' z-indexes.

Is there a way to do this? Extra information: I'm writing a Simple Window Manager with jQuery + jQuery UI, and the z-indexes are assigned by the stack option in .draggable. I can't seem to find a way to make jQuery to assign the last dragged element a class either, so I'm going by the highest z-index way. Any help please? Thanks.

Answer 1

I just figured out that there's a 'start dragging' event in .draggable. How silly of me.

$("#window-"+id+".staticwindow.stwin").draggable({
...
    start: function(e, u){
        $(".window").removeClass('active');
        $(this).addClass('active');
    }
});

Although this approach of mine is not related to my original question anymore, atleast there's no looping. I'm not going to accept any answer because this seems to need a loop. (Although I'm slightly inclined to accept the answer by zarko-o because it lead me to think on events)

Thanks everyone for your answers!

Answer 2

In your place I would simply attach event onclick on each div. I think then Javascript or jQuery will automatically take into account zindex information and you will get event exactly on DIV where you clicked.

Answer 3

You can always test against jQuery(".yourDivs").css("z-index") once you've added the class on all your divs.

Answer 4

I'm sure you could use the stop event to gain access to the recently dragged item, i.e.:

$('.selector').draggable({
   stop: function(event, ui) {
      $(event.target).addClass('justDragged');
   }
});

If you wish to see all functions/variables bound to event, you could use the following:

var str = '';
for (i in event) {
    str += i + ', ';
}
alert(str);

This should give you a good indication of what's available to you in any number of jQuery callback params.