javascript - 如何使用 jQuery 获取具有相同 z-index 的元素？

Question

现在，我有不同的元素z-index，我想使用 jQuery 对它们进行分组。

<div class="float" style="z-index:2"></div>
<div class="float" style="z-index:6"></div>
<div class="float" style="z-index:10"></div>
           .
           .
           .
<!-- You get the point -->

我可以用它.attr("style")来获取z-index价值，但这样做似乎不是一个好主意。（有时它也可能在<style>标签中）有类似的东西吗？

var ele = $("*[zindex=5]");

期待任何解决方案。

Answer 1

创建您自己的自定义选择器：

$.extend($.expr[':'], {
  zindex: function(el, i, m) {
    return $(el).css("z-index") === m[3];
  }
});

然后你可以像这样使用它：

$("div:zindex(2)").each(function(){
 alert( this.innerHTML );
});

这将返回所有div带有z-indexof 的元素2。

<div style="position:relative; z-index:2">Foo</div>
<div style="position:relative; z-index:6">Bar</div>

使用上面的标记，早期的 jQuery 脚本会提醒Foo.

演示：http: //jsbin.com/icevih/2/edit

Answer 2

如果您添加此功能，那么您将拥有它们

$.fn.filterByZIndex = function(zIndex) {
    var $zElm = $("*").filter(function() {
        return $(this).css('z-index') == zIndex;
    });
    return $zElm;
};