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-index 2的所有<div style="position:relative; z-index:2">Foo</div> <div style="position:relative; z-index:6">Bar</div>元素。

Foo

使用上述标记，较早的jQuery脚本将提醒{{1}}。

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

Answer 2

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

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

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

2 个答案: