Question

如何在文档中找到最高的z-index，无论它们是什么标记？

我找到了这段代码，但我测试了它并且它不起作用，

//include jQuery.js --  visit: http://jquery.com/
$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});

有更好的方法吗？

编辑：

如果我将代码更改为

，似乎有效

$('body *')

$('body > *') --> is for div only I guess.

Answer 1

这不是最有效的解决方案，但它应该有效。 jsFiddle

请注意，您必须指定一个位置，以便z-index返回一个值。

var highest = -999;

$("*").each(function() {
    var current = parseInt($(this).css("z-index"), 10);
    if(current && highest < current) highest = current;
});

alert(highest);

Answer 2

这似乎有效：

var maxZ=0;
$('*').each(function(){
    if($(this).css('zIndex') > maxZ) maxZ = $(this).css('zIndex');
})
console.log(maxZ);

<强> jsFiddle example

我认为您发布的代码的一个问题是您只检查绝对定位的元素。

Answer 3

只是添加一个没有jQuery的解决方案：

let all= Array.from(document.querySelectorAll('body *'));
console.log('Found ',all.length,' elements');
let allIndexes=all.map((elem)=>{
  if (elem.style) {
    return +elem.style.zIndex || 0;
  }
  return -9999;
});

let max=Math.max.apply(null,allIndexes);
console.log('Max z-index:',max);

.cl {
position: absolute;
border: 1px solid;
}

<div class="cl" style="z-index: 3;width:100px;height:100px;background:#A00;"></div>
<div class="cl" style="z-index: 4;width:90px;height:90px;background:#0A0;"></div>
<div class="cl" style="z-index: 5;width:50px;height:50px;background:#AA0;"></div>
<div class="cl" style="z-index: 6;width:40px;height:40px;background:#AAA"></div>

如何在文档中找到最高的z-index，无论它们是什么标签？

3 个答案: