jquery :循环，其中有z索引。

Question

在此帖子的后续工作中，我将进行更多的挑战--如何循环只具有z索引的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索引的div元素，然后忽略div的其余部分。

有可能吗？

谢谢。

Answer 1

我的想法是，您需要循环遍历所有DIVs并测试CSS z索引值，这不会有帮助。没有一种更合适的方法来严格按照该标准选择它们作为子集；此外，如果页面上有任何其他带有z索引的DIVs，它也会选择这些DIVs(如果可以的话)。可能不是个好办法。

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

<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索引的DIVs：

<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命名约定如您建议的那样，您也可以使用^选择器：

<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说将所有适用的divs分组在一个容器下是一个很好的点)，以查看哪些z-index集(因为在我所知道的任何浏览器中都没有原生的CSS属性选择器)。因此，我认为，在没有z索引( z-index，if (!$(this).css('z-index')) continue;)的所有迭代中，只循环遍历所有的continue;和s，不会大大提高性能。

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