jquery: trouver le plus haut z-index

Question

J'ai un certain nombre d'éléments div avec différents z-index. Et je veux trouver l'indice z le plus élevé parmi ces divs - comment puis-je l'obtenir?

le css,

 #layer-1 { z-index: 1 }
#layer-2 { z-index: 2 }
#layer-3 { z-index: 3 }
#layer-4 { z-index: 4 }
 

le 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>
 

Je ne pense pas que cette ligne puisse trouver le z-index le plus élevé ...

 var index_highest = parseInt($("div").css("zIndex"));
// returns 10000
 

Des idées?

Merci.

Answer 1

Notez que le z-index affecte uniquement les éléments positionnés. Par conséquent, tout élément position: static n'aura pas un z-index, même si vous lui assigner une valeur. Cela est particulièrement vrai dans les navigateurs comme Google Chrome.

var index_highest = 0;   
// more effective to have a class for the div you want to search and 
// pass that to your selector
$("#layer-1,#layer-2,#layer-3,#layer-4").each(function() {
    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

(voir ici (mise à jour) )

Un général sélecteur jQuery comme ça lorsqu'il est utilisé avec une option qui retourne une valeur de simplement retourner le premier. Si votre résultat est tout simplement le z-index de la première div que jQuery attrape. Pour télécharger uniquement les divs vous le souhaitez, utiliser une classe sur eux. Si vous souhaitez que tous les divs, bâton avec des div.

Answer 2

Voici une méthode très concise:

 var getMaxZ = function(selector){
    return Math.max.apply(null, $(selector).map(function(){
        var z;
        return isNaN(z = parseInt($(this).css("z-index"), 10)) ? 0 : z;
    }));
};
 

Usage:

 getMaxZ($("#layer-1,#layer-2,#layer-3,#layer-4"));
 

Ou, en tant qu'extension jQuery:

 jQuery.fn.extend({
    getMaxZ : function(){
        return Math.max.apply(null, jQuery(this).map(function(){
            var z;
            return isNaN(z = parseInt(jQuery(this).css("z-index"), 10)) ? 0 : z;
        }));
    }
});
 

Usage:

 $("#layer-1,#layer-2,#layer-3,#layer-4").getMaxZ();
 

Answer 3

Outre la solution native @justkt, il existe un bon plugin pour faire ce que vous voulez. Jetez un coup d'oeil à TopZIndex .

 $.topZIndex("div");
 

Answer 4

Essaye ça :

 var index_highest = 0;
$('div').each(function(){
    var index_current = parseInt($(this).css("z-index"), 10);
    if(index_current > index_highest) {
        index_highest = index_current;
    }
}); 
 

Answer 5

Je ne sais pas comment efficace, c'est, mais vous pouvez utiliser $.map pour obtenir tous les z-indices:

var $divs = $('div'),
    mapper = function (elem) {
        return parseFloat($(elem).css('zIndex'));
    },
    indices = $.map($divs, mapper);

L' indices variable est maintenant un tableau de tous les z-index pour tous les divs. Tout ce que vous avez à faire maintenant est d' apply à Math.max:

var highest = Math.max.apply(whatevs, indices);