Question

有被告知这是一个重复的问题的风险，我试图找出如何获得页面上所有div的最高z-Index值，包括由jQuery创建的那些。

情况是，我有一个toolTip div，位于页面顶部，由jQuery根据触发元素填充onMouseover或onClick。

我有一个隐藏的div，其中一个调用元素的onClick出现在一个Lightbox样式窗口中，由jQuery给出它的z-Index。我需要能够从这个div中的元素触发我的onMouseover工具提示，但它目前正在显示它背后。

显然我可以手动完成，但为了将来的使用，我认为计算方法会更好......

谷歌像往常一样把我带到了这篇文章 How can you figure out the highest z-index in your document?

我从中找到了

function findHighestZIndex(elem) {
    var elems = document.getElementsByTagName(elem);
    var highest = 0;
    for (var i = 0; i < elems.length; i++) {
        var zindex = document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index");
        if ((zindex > highest) && (zindex != 'auto')) {
            highest = zindex;
        }
    }
    return (highest * 1);
}

对于通过CSS显式设置z-Indexes的元素，它可以正常工作。

但是，不是jQuery显示/填充的div。

上面的函数忽略了这个模态窗口，可能是因为z-Index是以编程方式创建的？

我在SO

上也发现了这个功能

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        if ($(this).css('z-index') > zIndexMax) zIndexMax = $(this).css('z-index');
    });
    return (zIndexMax * 1);
}

但由于某种原因，返回'NAN'

我想我需要在这里的某处使用'live'，但不知道如何去做。

如果有人认为这是一个重复的问题，再一次道歉，但我在这里找到的问题并没有完全回答这个问题。

Answer 1

.css（'z-index'）返回string

'100' > 0 //true
'auto' > '100' //true

因此zIndexMax最有可能是'auto'而'auto' * 1是NaN

试试这个

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        var z = parseInt($(this).css('z-index'));
        if (z > zIndexMax) zIndexMax = z;
    });
    return zIndexMax;
}

Answer 2

只是一个单挑。如果您使用的是基于Webkit的浏览器（例如：Chrome，Safari），$(element).css('z-index')将始终返回字符串auto，而element.style.zIndex将永远不会返回任何除非所选元素也具有明确的position CSS样式。所以，除了@ W.T提供的建议。在上面，请确保为要通过JavaScript可靠地读取数值的position的任何元素声明CSS z-index。

使用jQuery.live获取最高Z-Index值以确保考虑所有元素

2 个答案: