jquery each: 仅循环具有 z-index 的答案

【问题标题】：jquery each: loops only which has the z-indexjquery each: 仅循环具有 z-index 的
【发布时间】：2011-04-17 01:36:21
【问题描述】：

在此post 的后续工作中，我将进一步挑战——如何循环仅具有 z-index 的 div 元素？

CSS，

#layer-1 { z-index:1; position:absolute; }
#layer-2 { z-index:2; position:absolute; }
#layer-3 { z-index:3; position:absolute; }

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>

jquery，

var index_highest = 0;

// more effective to have a class for the div you want to search and 
// pass that to your selector
$("div").each(function() {

    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    alert(index_current);

    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

这里的 jquery 代码循环每个 div 元素。当我的根文档中有大量 div 时，它不是是一个好的解决方案。所以我认为，理想情况下，代码可以只循环只有 z-index 的 div 元素，然后忽略其余的 div。

有可能吗？

谢谢。

【问题讨论】：

什么是循环遍历只有 z-index 的 div 元素，如果你能告诉我们可以建议一个更好的解决方案
我认为你正在做相反的事情，你应该在生成 html 时这样做，并且你应该知道什么元素具有高 z 索引。
@kobe：谢谢。它适用于我拥有的弹出 div。当我弹出一个新的 div 时，我可能已经存在另一个弹出 div。所以我每次都需要新的弹出 div 位于旧的弹出 div 之上。这就是为什么我需要找到最高的弹出 z-index 以便我可以将 +1 添加到新的弹出 div 的 z-index。但我不会循环我拥有的所有 div，因为完成循环需要很长时间。希望这是有道理的。谢谢。
您是否有很多弹出窗口或者它们过于动态？否则你可以手动给他们权利，
@kobe：我想说他们太有活力了。其中一些不是弹出窗口。他们只是有绝对的位置和z-index。

标签： jquery loops z-index each

【解决方案1】：

我的想法是，您需要遍历所有 DIV 并测试 CSS z-index 值，这不会有帮助。没有更合适的方法可以严格按照该标准将它们选择为子集；此外，如果您在页面上有任何其他带有 z-index 的 DIV，它也会选择那些（如果可以的话）。可能不是一个好方法。

如果它们在一起，您应该将它们分组：

<div id="layers">
 <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>
</div>

$("#layers").each(function() {
    // stuff happens
});

或者向 z 索引的 DIV 添加类：

<div id="layer-1" class="layer">layer-1</div>
<div id="layer-2" class="layer">layer-2</div>
<div id="layer-3" class="layer">layer-3</div>
<div id="layer-4" class="layer">layer-4</div>

$(".layers").each(function() {
    // stuff happens
});

如果您的 ID 命名约定符合您的建议，您也可以使用 ^ selector：

<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>

$("div[id^=layer-]").each(function() {
    // stuff happens
});

http://jsfiddle.net/MFqNm/

【讨论】：

我只是在输入同样的答案！ - 只是一个澄清说明，据我所知，没有办法将 z-index 作为 jQuery 选择器的一部分。您将需要执行@Jared 在此答案中指出的操作。
@lauthiamkok - 没问题。 :)

【解决方案2】：

无论哪种方式，您的 Javascript 都必须遍历所有 div（尽管 Jared 所说的将所有适用的 divs 分组到一个容器下是一个好点），以查看哪些具有 z-index设置（因为在我知道的任何浏览器中都没有原生 CSS 属性选择器）。因此，我认为在没有 z-index (if (!$(this).css('z-index')) continue;) 的所有迭代中循环遍历所有 divs 和 continue;ing 相比，您不会获得很大的性能提升。

如果您真的很担心，您可以尝试确定哪些元素将在服务器级别具有z-index，并以编程方式添加一个类。然后，您可以使用 jQuery 仅选择该类的元素。

【讨论】：