web-dev-qa-db-fra.com

Comment trouver le z-index le plus élevé à l'aide de jQuery

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

CSS:

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

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 plus haut z-index.

var index_highest = parseInt($("div").css("zIndex"));
// returns 10000
jquerycssz-index
43
laukok

Notez que z-index affecte uniquement les éléments positionnés. Par conséquent, tout élément avec position: static n'aura pas d'index z, même si vous lui affectez 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;
    }
});

démo JSFiddle

Un sélecteur jQuery général comme celui-ci, lorsqu'il est utilisé avec une option qui renvoie une valeur, renverra simplement la première. Ainsi, votre résultat est simplement le z-index du premier div que jQuery saisit. Pour saisir uniquement les divs que vous voulez, utilisez une classe dessus. Si vous voulez toutes les divs, restez avec div.

35
justkt

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();
13
Aaron J Spetner

Outre la solution native de @ justkt ci-dessus, il existe un plugin Nice pour faire ce que vous voulez. Jetez un oeil à TopZIndex .

$.topZIndex("div");
11
Anthony Accioly

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;
    }
});
5
David

Cela le ferait:

$(document).ready(function() {
    var array = [];
    $("div").each(function() {
        array.Push($(this).css("z-index"));
    });
    var index_highest = Math.max.apply(Math, array);
    alert(index_highest);
});

Essayez ceci

3
Hari Pachuveetil

Je ne sais pas à quel point c'est efficace, 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);

La variable indices est maintenant un tableau de tous les z-indices pour toutes les divs. Il ne vous reste plus qu'à apply à Math.max:

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

Ceci est tiré directement de jquery-ui, cela fonctionne très bien:

(function ($) {
  $.fn.zIndex = function (zIndex) {
      if (zIndex !== undefined) {
        return this.css("zIndex", zIndex);
      }

      if (this.length) {
        var elem = $(this[ 0 ]), position, value;
        while (elem.length && elem[ 0 ] !== document) {
          // Ignore z-index if position is set to a value where z-index is ignored by the browser
          // This makes behavior of this function consistent across browsers
          // WebKit always returns auto if the element is positioned
          position = elem.css("position");
          if (position === "absolute" || position === "relative" || position === "fixed") {
            // IE returns 0 when zIndex is not specified
            // other browsers return a string
            // we ignore the case of nested elements with an explicit value of 0
            // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
            value = parseInt(elem.css("zIndex"), 10);
            if (!isNaN(value) && value !== 0) {
              return value;
            }
          }
          elem = elem.parent();
        }
      }

      return 0;
    }
})(jQuery);
2
Andrew Barrett

Voici comment j'ai obtenu les deux index z les plus bas/les plus élevés. Si vous voulez seulement obtenir le z-index le plus élevé et rien de plus, alors cette fonction peut ne pas être efficace, mais si vous voulez obtenir tous les z-index et les identifiants qui y sont associés (c'est-à-dire pour une utilisation avec amener la "couche" à l'avant/envoyer en arrière, avancer, envoyer en arrière, etc.), c'est une façon de le faire. La fonction renvoie un tableau d'objets contenant des identifiants et leurs index z.

function getZindex (id) {

     var _l = [];
     $(id).each(function (e) {
         // skip if z-index isn't set 
         if ( $(this).css('z-index') == 'auto' ) {
              return true
         }
         _l.Push({ id: $(this), zindex: $(this).css('z-index') });
     });
     _l.sort(function(a, b) { return a.zindex - b.zindex });
     return _l;
}

// You'll need to add a class 'layer' to each of your layer
var _zindexes = getZindex('.layer');
var _length = _zindexes.length;

// Highest z-index is simply the last element in the array
var _highest = _zindexes[_length - 1].zindex

// Lowest z-index is simply the first element in the array
var _lowest = _zindex[0].zindex;

alert(_highest);
alert(_lowest);
1
Keith Socheath Chea

Vanilla JS, pas 100% cross-browser. Y compris comme référence pour les futurs lecteurs/méthode alternative.

function getHighIndex (selector) {
    // No granularity by default; look at everything
    if (!selector) { selector = '*' };

    var elements = document.querySelectorAll(selector) ||
                   oXmlDom.documentElement.selectNodes(selector),
        i = 0,
        e, s,
        max = elements.length,
        found = [];

    for (; i < max; i += 1) {
        e = window.getComputedStyle(elements[i], null).zIndex || elements[i].currentStyle.zIndex;
        s = window.getComputedStyle(elements[i], null).position || elements[i].currentStyle.position;

        // Statically positioned elements are not affected by zIndex
        if (e && s !== "static") {
          found.Push(parseInt(e, 10));
        }
    }

    return found.length ? Math.max.apply(null, found) : 0;
}
0
Kai

Essayez mon violon:

http://planitize.tumblr.com/post/23541747264/get-highest-z-index-with-descendants-included

Cela combine trois avantages que je n'ai pas vus combinés ailleurs:

  • Obtient soit le z-index défini explicitement le plus élevé (par défaut), soit le plus élevé calculé.
  • Regardera tous les descendants de votre sélecteur, ou tous les descendants du document si aucun n'est fourni.
  • Renvoie soit la valeur du z le plus élevé, soit l'élément qui a le z le plus élevé.

Un inconvénient: aucune garantie multi-navigateur.

0
Wytze