Question

跟进这个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。

有可能吗？

感谢。

Answer 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-indexed 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/

Answer 2

不管怎样，你的Javascript必须循环遍历所有div（尽管Jared所说的关于将所有适用的div分组在一个容器下是一个好点），看看哪些有{ {1}}设置（因为在我知道的任何浏览器中都没有本机CSS属性选择器）。因此，我认为在没有z-index的所有迭代中，只需循环遍历所有z-index和div，我就不会得到很大的性能提升（{ {1}}）。

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

jquery each：仅循环具有z-index

2 个答案: