Как найти самый высокий z-индекс с помощью jQuery

У меня есть ряд элементов div с разными z-индексами. И я хочу найти самый высокий индекс z среди этих divs – как я могу его достичь?

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

Я не думаю, что эта строка может найти самый высокий z-индекс.

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

Обратите внимание, что z-индекс влияет только на позиционированные элементы. Поэтому любой элемент с position: static не будет иметь z-index, даже если вы присвоите ему значение. Это особенно верно в браузерах, таких как 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; } }); 

Демо-версия JSFiddle

Общий селектор jQuery, который используется при использовании опции, возвращающей одно значение, просто возвращает первый. Таким образом, ваш результат – это просто z-индекс первого div, который захватывает jQuery. Чтобы захватить только те div, которые вы хотите, используйте class на них. Если вы хотите, чтобы все divs, придерживайтесь div .

Вот очень краткий метод:

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

Применение:

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

Или, как расширение 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; })); } }); 

Применение:

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

Кроме того, что у вас есть собственное решение justkt, есть хороший плагин для того, чтобы делать то, что вы хотите. Взгляните на TopZIndex .

 $.topZIndex("div"); 

Попробуй это :

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

Я не знаю, насколько это эффективно, но вы можете использовать $.map для получения всех z-индексов:

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

Переменная indices теперь представляет собой массив всех z-индексов для всех div. Все, что вам нужно сделать, это apply их к Math.max :

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

Это сделало бы это:

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

Попробуйте это

Здесь, как я получил и самые низкие / самые высокие z-индексы. Если вы хотите получить наивысший индекс z и ничего больше, то эта функция может оказаться неэффективной, но если вы хотите получить все z-индексы и связанные с ним идентификаторы (т. Е. Для использования с приведением слоя к фронту / отправлять назад, выдвигать, отправлять назад и т. д.), это один из способов сделать это. Функция возвращает массив объектов, содержащих идентификаторы и их 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); 

Это взято непосредственно из jquery-ui, оно работает очень хорошо:

 (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, а не 100% кросс-браузер. Включение в качестве ссылки для будущих читателей / альтернативного метода.

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

Попробуйте мою скрипку:

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

Это сочетает в себе три преимущества, которых я не видел в другом месте:

  • Получает либо наивысший явно определенный z-индекс (по умолчанию), либо самый высокий расчетный.
  • Посмотрите на всех потомков вашего селектора или всех потомков документа, если он не указан.
  • Вернет либо значение самого высокого z, либо элемент с наивысшим z.

Один недостаток: никаких кроссбраузерных гарантий.

Если вы делаете то, что, я думаю, вы делаете, нет необходимости. Просто сделайте это:

 $('div[id^=layer-]').css('z-index', 0); $(this).css('z-index', 1000); 
  • Java Swing - как показать панель поверх другой панели?
  • WindowsFormsHost всегда самый верхний элемент WPF
  • :: перед выпуском порядка псевдоэлементной укладки
  • Interesting Posts
    Давайте будем гением компьютера.