jQuery 如何使用jQuery找到最高的z-index

How to find the highest z-index using jQuery

提问by laukok

I have a number of div elements with different z-index. And I want to find the highest z-index among these divs - how can I achieve it?

我有许多具有不同 z-index 的 div 元素。我想在这些 div 中找到最高的 z-index - 我该如何实现？

CSS:

CSS：

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

HTML:

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>

I don't think this line can find the highest z-index though.

我不认为这条线可以找到最高的 z-index。

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

采纳答案by justkt

Note that z-index only affects positioned elements. Therefore, any element with position: staticwill not have a z-index, even if you assign it a value. This is especially true in browsers like Google Chrome.

请注意，z-index 仅影响定位元素。因此，任何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 demo

JSFiddle 演示

A general jQuery selector like that when used with an option that returns one value will merely return the first So your result is simply the z-index of the first div that jQuery grabs. To grab only the divs you want, use a class on them. If you want all divs, stick with div.

像这样的通用 jQuery 选择器与返回一个值的选项一起使用时只会返回第一个因此您的结果只是 jQuery 抓取的第一个 div 的 z-index。要仅获取您想要的 div，请在它们上使用一个类。如果您想要所有 div，请坚持使用div.

回答by Aaron J Spetner

Here is a very concise method:

这是一个非常简洁的方法：

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

Or, as a jQuery 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();

回答by Anthony Accioly

Besides @justkt's native solution above, there is a nice plugin to do what you want. Take a look at TopZIndex.

除了上面@justkt 的原生解决方案，还有一个不错的插件可以做你想做的事。看看TopZIndex。

$.topZIndex("div");

回答by David

Try this :

尝试这个 ：

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

回答by Hari Pachuveetil

This would do it:

这样做：

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

Try this

试试这个

回答by Andrew Barrett

This is taken directly from jquery-ui, it works really well:

这是直接取自 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);

回答by sdleihssirhc

I don't know how efficient this is, but you can use $.mapto get all the z-indices:

我不知道这有多有效，但您可以使用它$.map来获取所有 z 索引：

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

The indicesvariable is now an array of all the z-indices for all the divs. All you'd have to do now is applythem to Math.max:

该indices变量现在是所有 div 的所有 z 索引的数组。所有你现在要做的是apply他们Math.max：

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

回答by Keith Socheath Chea

Here how I got both lowest/highest z-indexes. If you only want to get the highest z-index and nothing more, then this function may not efficient, but if you want to get all z-indexes and the ids associated with it (i.e. for use with bring 'layer' to front/send to back, bring forward, send backward, etc), this is one way to do it. The function returns an array of objects containing ids and their z-indexes.

在这里，我如何获得最低/最高的 z-index。如果您只想获得最高的 z-index 而仅此而已，那么此函数可能效率不高，但是如果您想获得所有 z-index 和与之关联的 id（即用于将“层”置于最前面/发送到后面，向前发送，向后发送等），这是一种方法。该函数返回一个包含 id 及其 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);

回答by Kai

Vanilla JS, not 100% cross-browser. Including as reference for future readers/alternative method.

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

回答by Wytze

Try my fiddle:

试试我的小提琴：

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

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

This combines three advantages I haven't seen combined elsewhere:

这结合了我在其他地方没有见过的三个优点：

• Gets either the highest explicitly defined z-index (default) or the highest computed one.
• Will look at all descendants of your selector, or all descendants of the document if none is supplied.
• Will return either the value of the highest z, or the element that has the highest z.

• 获取显式定义的最高 z-index（默认值）或计算得出的最高 z-index。
• 将查看选择器的所有后代，或者如果没有提供文档的所有后代。
• 将返回最高 z 的值，或具有最高 z 的元素。

One disadvantage: no cross-browser guarantees.

一个缺点：没有跨浏览器的保证。