web-dev-qa-db-ja.com

jQueryを使用して最高のz-indexを見つける方法

異なるz-indexを持つ多数のdiv要素があります。そして、これらのdivの中で最も高いz-indexを見つけたい-どうすればそれを達成できますか？

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インデックスを見つけることはできないと思います。

var index_highest = parseInt($("div").css("zIndex"));
// returns 10000
jquerycssz-index
43
laukok

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セレクターは、1つの値を返すオプションと共に使用すると、最初の値を返すだけです。したがって、結果は、jQueryが取得する最初のdivのz-indexになります。必要なdivのみを取得するには、それらのクラスを使用します。すべてのdivが必要な場合は、divを使用してください。

35
justkt

非常に簡潔な方法を次に示します。

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();
13
Aaron J Spetner

上記の@justktのネイティブソリューションに加えて、必要なことを行うためのNiceプラグインがあります。 TopZIndex を見てください。

$.topZIndex("div");
11
Anthony Accioly

これを試して ：

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;
    }
});
5
David

これはそれをします：

$(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);
});

this を試してください

3
Hari Pachuveetil

これがどれほど効率的かはわかりませんが、 $.map すべてのZ指数を取得するには：

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

indices変数は、すべてのdivのすべてのzインデックスの配列になりました。今やらなければならないのは、 apply それらをMath.max：

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

これは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);
2
Andrew Barrett

ここで、最低/最高の両方のZインデックスを取得しました。最高のz-indexのみを取得したい場合、この関数は効率的ではないかもしれませんが、すべてのz-indexとそれに関連付けられたIDを取得したい場合（つまり、「layer」を最前面/後ろに送る、前に出す、後ろに送るなど）、これはそれを行う1つの方法です。この関数は、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);
1
Keith Socheath Chea

100％クロスブラウザではなく、バニラJS。将来の読者/代替方法の参照として含む。

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;
}
0
Kai

私のフィドルを試してください：

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

これは、他では見られなかった3つの利点を組み合わせたものです。

  • 明示的に定義された最高のz-index（デフォルト）または計算された最高のz-indexを取得します。
  • セレクタのすべての子孫、または何も指定されていない場合はドキュメントのすべての子孫を調べます。
  • 最高のzの値、または最高のzを持つ要素のいずれかを返します。

1つの欠点：クロスブラウザーの保証がない。

0
Wytze