Cómo encontrar el índice z más alto usando jQuery

Tengo una serie de elementos div con diferentes índices z. Y quiero encontrar el índice z más alto entre estos divs: ¿cómo puedo lograrlo?

CSS:

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

HTML:

 
layer-1
layer-2
layer-3
layer-4

Sin embargo, no creo que esta línea pueda encontrar el índice z más alto.

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

Tenga en cuenta que el índice Z solo afecta a los elementos posicionados. Por lo tanto, cualquier elemento con position: static no tendrá un índice z, incluso si le asigna un valor. Esto es especialmente cierto en navegadores como 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; } }); 

Demostración de JSFiddle

Un selector jQuery general como ese cuando se utiliza con una opción que devuelve un valor simplemente devolverá el primero. Entonces, el resultado es simplemente el índice z del primer div que jQuery toma. Para obtener solo los divs que desee, use una clase en ellos. Si quieres todos los divs, quédate con div .

Aquí hay un método muy conciso:

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

Uso:

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

O, como una extensión de 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; })); } }); 

Uso:

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

Además de la solución nativa de @justkt anterior, hay un buen complemento para hacer lo que quieras. Eche un vistazo a TopZIndex .

 $.topZIndex("div"); 

Prueba esto :

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

No sé cuán eficiente es esto, pero puedes usar $.map para obtener todos los índices z:

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

La variable de indices ahora es una matriz de todos los índices z para todos los divs. Todo lo que tendrías que hacer ahora es apply a Math.max :

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

Esto lo haría:

 $(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); }); 

Prueba esto

Aquí cómo obtuve los índices z más bajos / más altos. Si solo desea obtener el índice z más alto y nada más, entonces esta función puede no ser eficiente, pero si desea obtener todos los índices z y los identificadores asociados con ella (es decir, para usar con traer ‘capa’ al frente / enviar hacia atrás, adelantar, enviar hacia atrás, etc.), esta es una forma de hacerlo. La función devuelve una matriz de objetos que contienen identificadores y sus índices 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); 

Esto se toma directamente de jquery-ui, funciona muy 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 // 
value = parseInt(elem.css("zIndex"), 10); if (!isNaN(value) && value !== 0) { return value; } } elem = elem.parent(); } } return 0; } })(jQuery);

Vanilla JS, no es 100% navegador cruzado. Incluyendo como referencia para futuros lectores / método alternativo.

 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; } 

Prueba mi violín:

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

Esto combina tres ventajas que no he visto combinadas en otros lugares:

  • Obtiene el índice z más alto explícitamente definido (predeterminado) o el más alto calculado.
  • Observará todos los descendientes de su selector, o todos los descendientes del documento si no se proporciona ninguno.
  • Devolverá el valor de la z más alta o el elemento que tiene la z más alta.

Una desventaja: no hay garantías entre navegadores.

Si estás haciendo lo que creo que estás haciendo, no hay necesidad. Solo haz esto:

 $('div[id^=layer-]').css('z-index', 0); $(this).css('z-index', 1000);