Como encontrar o maior z-index usando jQuery

Eu tenho um número de elementos div com diferentes z-index. E eu quero encontrar o maior z-index entre esses divs – como posso alcançá-lo?

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

Eu não acho que esta linha possa encontrar o maior z-index.

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

Observe que o z-index afeta apenas os elementos posicionados. Portanto, qualquer elemento com position: static não terá um z-index, mesmo se você atribuir um valor a ele. Isso é especialmente verdadeiro em navegadores como o 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; } }); 

Demonstração JSFiddle

Um seletor geral do jQuery como esse, quando usado com uma opção que retorna um valor, simplesmente retornará o primeiro. Portanto, seu resultado é simplesmente o índice z do primeiro div que o jQuery agarra. Para pegar apenas os divs que você quer, use uma class sobre eles. Se você quiser todos os divs, fique com div .

Aqui está um método muito 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")); 

Ou, como uma extensão do 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(); 

Além da solução nativa do @justkt acima, existe um plugin legal para fazer o que você quiser. Dê uma olhada no TopZIndex .

 $.topZIndex("div"); 

Tente isto:

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

Eu não sei quão eficiente isso é, mas você pode usar $.map para obter todos os índices-z:

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

A variável de indices agora é uma matriz de todos os índices-z para todos os divs. Tudo o que você precisa fazer agora é apply las ao Math.max :

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

Isso faria isso:

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

Tente isso

Aqui, como consegui os índices z mais baixos / mais altos. Se você quer apenas obter o maior z-index e nada mais, então esta function pode não ser eficiente, mas se você quiser obter todos os z-indexes e os ids associados a ele (por exemplo, para usar ‘layer’ para front / enviar para trás, trazer para a frente, enviar para trás, etc), esta é uma maneira de fazê-lo. A function retorna uma matriz de objects contendo ids e seus z-indexes.

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

Isto é obtido diretamente do jquery-ui, funciona muito bem:

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

Baunilha JS, não 100% cross-browser. Incluindo como referência para futuros leitores / 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; } 

Tente meu violino:

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

Isso combina três vantagens que não vi combinadas em outros lugares:

  • Obtém o z-index mais alto explicitamente definido (padrão) ou o mais alto calculado.
  • Verá todos os descendentes do seu seletor ou todos os descendentes do documento, se nenhum for fornecido.
  • Retornará o valor do z mais alto ou o elemento que tiver o z mais alto.

Uma desvantagem: não há garantias entre navegadores.

Se você está fazendo o que eu acho que você está fazendo, não há necessidade. Apenas faça isso:

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