Как найти самый высокий z-индекс, используя jQuery

Question

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

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>

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

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

Answer 1

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

Answer 2

Вот очень сжатый метод:

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

Answer 3

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

$.topZIndex("div");

Answer 4

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

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

Это будет сделано:

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

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

Answer 6

Это взято непосредственно из 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
            // <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);

Answer 7

Я не знаю, насколько это эффективно, но вы можете использовать $.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);

Answer 8

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

Answer 9

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

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

Answer 10

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

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

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

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

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