jquery each: loops only which has the z-index

Question

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.

what is the need to loop through div elements which has only z-index , may be if you can tell we can suggest a better a solution — kobe, Apr 17 '11 at 01:39
I thik you are doing opposite , you should do this while generating html and you should know a head what element has high z index. — kobe, Apr 17 '11 at 01:44
@kobe: thanks. it is for the popup divs that I have. when I popup a new div, I might have another popup div existed already. so i need the new popup div to be on top of the older popup divs each time. that's why I need to find the highest popup z-index so that I can add +1 to the new popup div's z-index. but i don't to loop all the divs I have as it will take a long time to finish the loop. hope this make sense. thanks. — Run, Apr 17 '11 at 01:47
do you have lot of popups or they are too dyamic ?? other wise you can give them manually right , — kobe, Apr 17 '11 at 01:54
@kobe: they are too dynamic I would say. some of them are not popups. they are just have the position to absolute and with z-index. — Run, Apr 17 '11 at 10:48

Jared Farrish · Accepted Answer · 2011-04-17T01:47:25.610

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/

I was just typing this same answer up! - Just a note of clarification, as far as I know there is no way to include the z-index as part of the jQuery selector. You will need to do something like @Jared has indicated in this answer. — Goyuix, Apr 17 '11 at 01:41

score 0 · Answer 2 · answered Apr 17 '11 at 01:42

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.

jquery each: loops only which has the z-index

2 Answers2