jquery each: loops only which has the z-index

Following up on this post, I am going further for a bit more challenge - how can I loop the div element which only has z-index only?

css,

#layer-1 { z-index:1; position:absolute; }
#layer-2 { z-index:2; position:absolute; }
#layer-3 { z-index:3; position:absolute; }

html,

<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>

jquery,

var index_highest = 0;

// more effective to have a class for the div you want to search and 
// pass that to your selector
$("div").each(function() {

    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    alert(index_current);

    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

The jquery code here is looping each 开发者_运维知识库of the div element. It will not be a good solution when I have tons of the divs on my root document. so I think, ideally the code could just loop the div element which has z-index only, then ignore the rest of the divs.

Is it possible?

Thanks.

My thought is that you would need to loop through all DIVs and test for the CSS z-index value, which won't be helpful. There isn't a more suitable way to select them as a subset strictly by that criteria; also, if you have any other DIVs with z-index on the page, it will also select those (if you could do that). Probably not a good way to go.

You should either group them if they are together:

<div id="layers">
 <div id="layer-1">layer-1</div>
 <div id="layer-2">layer-2</div>
 <div id="layer-3">layer-3</div>
 <div id="layer-4">layer-4</div>
</div>

$("#layers").each(function() {
    // stuff happens
});

Or add classes to the z-indexed DIVs:

<div id="layer-1" class="layer">layer-1</div>
<div id="layer-2" class="layer">layer-2</div>
<div id="layer-3" class="layer">layer-3</div>
<div id="layer-4" class="layer">layer-4</div>

$(".layers").each(function() {
    // stuff happens
});

Also you could use a ^ selector if your ID naming convention is as you suggest:

<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>

$("div[id^=layer-]").each(function() {
    // stuff happens
});

http://jsfiddle.net/MFqNm/

One way or the other, your Javascript is going to have to loop through all divs (although what Jared said about grouping all applicable divs under one container is a good point) to see which ones have a z-index set (since there's no native CSS property selector in any browser that I know of). So I don't think you're going to get much of a performance boost over just looping through all divs and continue;ing in all iterations where you don't have a z-index (if (!$(this).css('z-index')) continue;).

If you're really concerned, you can try to determine which elements will have a z-index at the server level and add a class programmatically. You can then use jQuery to select elements of that class only.