通过使用 jquery 检查 z-index 找到最上面的 div答案

【问题标题】：find the top most div by checking z-index using jquery通过使用 jquery 检查 z-index 找到最上面的 div
【发布时间】：2012-09-18 22:23:13
【问题描述】：

我需要通过检查 z-index 来找到最上面的 div：

<div>
<div id="box_1">some image</div>
<div id="box_444">some image</div>
<div id="box_555">some image</div>
<div id="box_888">some image</div>
<div id="box_999">some image</div>
</div>

我能解释的最好方法就像在黑暗中洗牌一副图像而不知道哪个图像在上面。基本上我需要检查哪个 div 具有最高的 z-index 并通过 div 的 id 来识别。

任何 jquery 专家可以帮助我吗？

谢谢。

【问题讨论】：

z-index 是使用特定的class 设置的，还是在style 属性中设置的（内联CSS）？
那么你真正想要的是一种在集合中找到最大数的算法？你有没有尝试过？

标签： jquery z-index

【解决方案1】：

基本上我需要检查哪个 div 具有最高的 z-index 并通过 div 的 id 来识别

你在寻找这样的东西吗？

var allDivs = $('div div');
var topZindex = 0;
var topDivId;
allDivs.each(function(){
    var currentZindex = parseInt($(this).css('z-index'), 10);
    if(currentZindex > topZindex) {
        topZindex = currentZindex;
        topDivId = this.id;
    }
});

console.log(topDivId);
console.log(topZindex);

http://jsfiddle.net/emLcY/

【讨论】：

【解决方案2】：

试试这个

var greatest = 0;
var greatestDiv;

$('div').each(function(){
    if($(this).css('z-index') > greatest){
        greatest = $(this).css('z-index');
        greatestDiv = $(this).attr('id');
    }
})

console.log(greatest);
console.log(greatestDiv);

【讨论】：

【解决方案3】：

试试这个

$(function() {
    var $divs = $('div > div');   
    var maxId = '';
    var max = 0;

    $.each($divs, function(i){
       var a = $($divs[i]).css('z-index');
        console.log(a);
        if(parseInt(a) > parseInt(max)){
           max = a;
           maxId = $(this).attr('id');
        }
    });    
    alert(maxId);
});

【讨论】：

【解决方案4】：

This 会带你去那里：

$(function(){
    var highest = -1, el = null;
    $('div[id^="box"]').each(function(){

        var z = parseInt($(this).css('z-index'), 10);

        if (z > highest) { 
            el = this;
            highest = z;                    
        }
    });

    console.log('the highest is:', el)
});

【讨论】：

既然你的代码已经使用了jQuery，为什么不使用$(this).css('z-index')呢？即使未将其定义为内联样式，也会得到计算出的 z-index 值。
从我的测试来看，它没有得到正确的 css z-index，直接访问该属性将减少开销。 css 包装器有时很方便。
我看过小提琴。您的计算值确实是auto，因为您的 div 没有定位。 z-index 只能应用于定位元素。检查this。
这是真的，这使得css 成为更好的候选人。希望这些 cmets 能帮助其他人。

【解决方案5】：

Working Demo

$.fn.topmost = function () {
    var positionedDivs = this.filter( function() {
        return !isNaN( parseInt( $(this).css("z-index"), 10 ) );
    });
    var topElem = positionedDivs.first();

    positionedDivs.each( function() {
        if ( $(this).css('z-index') > +topElem.css("z-index") ) {
            topElem = $(this);
        }
    });

    return topElem.get(0) || this.get(0);
};

$(function() {
    var topDiv = $('div > div').topmost();
    console.log( topDiv.id )
});

【讨论】：