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

| 我有许多具有不同z-index的div元素。我想在这些div中找到最高的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-index。
var index_highest = parseInt($(\"div\").css(\"zIndex\"));
// returns 10000
    
已邀请:
请注意,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演示 像这样的通用jQuery选择器与返回一个值的选项一起使用时,只会返回第一个值。因此,您的结果就是jQuery捕获的第一个div的z-index。要仅获取所需的div,请在它们上使用一个类。如果要所有股利,请坚持
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;
    }
}); 
    
这样做:
$(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);
});
尝试这个     
我不知道这有多有效,但是您可以使用
$.map
来获取所有z索引:
var $divs = $(\'div\'),
    mapper = function (elem) {
        return parseFloat($(elem).css(\'zIndex\'));
    },
    indices = $.map($divs, mapper);
现在,
indices
变量是所有div的所有z索引的数组。您现在所要做的就是将ѭ16更改为
Math.max
var highest = Math.max.apply(whatevs, indices);
    
这是直接从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);
    
在这里,我如何获得最低/最高的z-indexs。如果只想获取最高的z-index,仅此功能可能无效,但是如果您想获取所有z-index和与其关联的ID(即与带\'layer \'一起使用前进/后退,前进,后退等),这是一种方法。该函数返回一个包含id及其z-index的对象数组。
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);
    
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-index(默认值)或最高计算的z-index。 将查看选择器的所有后代,或者未提供任何文档的所有后代。 将返回最高z的值或具有最高z的元素。 缺点之一:没有跨浏览器保证。     
如果您正在做我认为正在做的事情,则没有必要。只是这样做:
$(\'div[id^=layer-]\').css(\'z-index\', 0);
$(this).css(\'z-index\', 1000);
    

要回复问题请先登录注册