Question

Right now, I have elements with different z-index, and I want to group them using jQuery.

<div class="float" style="z-index:2"></div>
<div class="float" style="z-index:6"></div>
<div class="float" style="z-index:10"></div>
           .
           .
           .
<!-- You get the point -->

I can use .attr("style") to get the z-index value out, but it does not seem to be a good idea to do that. (and sometimes it might in the <style> tag too) Is there anything like that?

var ele = $("*[zindex=5]");

Looking forward for any solutions.

Answer 1

Create your own custom selector:

$.extend($.expr[':'], {
  zindex: function(el, i, m) {
    return $(el).css("z-index") === m[3];
  }
});

Which you could then use like this:

$("div:zindex(2)").each(function(){
 alert( this.innerHTML );
});

This will return all div elements with a z-index of 2.

<div style="position:relative; z-index:2">Foo</div>
<div style="position:relative; z-index:6">Bar</div>

With the above markup, the earlier jQuery script will alert Foo.

Demo: http://jsbin.com/icevih/2/edit