如何使用jQueryfind最高的z-index

我有一些不同的Z指数div元素。 我想在这些div中find最高的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> 

我不认为这条线可以find最高的Z指数。

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

Answer 1

请注意，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演示

一个像这样的普通jQueryselect器，当与一个返回一个值的选项一起使用时，只会返回第一个。因此，您的结果只是jQuery抓取的第一个div的z-index。 要只抓住你想要的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原生解决scheme，还有一个很好的插件可以做你想做的事情。 看看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

我不知道这是多高效，但是可以使用$.map来获得所有的z-index：

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

indicesvariables现在是所有div的所有z-index的数组。 你现在要做的就是apply它们apply到Math.max ：

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

Answer 6

这将做到这一点：

 $(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 7

在这里，我是如何得到最低/最高的z-索引。 如果你只想获得最高的z-index，那么这个函数可能效率不高，但是如果你想得到所有的z-索引和与之相关的id（即用于将'layer'放在前面/发回，发回，发回等），这是一个办法。 该函数返回一个包含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); 

Answer 8

这是从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 9

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

Answer 10

试试我的小提琴：

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

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

• 获取显式定义的最高z-索引（默认值）或最高的计算值。
• 将查看您的select器的所有后代，如果没有提供任何文档的所有后代。
• 将返回最高z的值，或者返回z最高的元素。

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

Answer 11

如果你正在做我认为你正在做的事，那就没有必要。 只要这样做：

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