Javascript 使用查询将不同的CSS应用于所有嵌套的div

我想对每个嵌套的div应用z-index。很难为style.css中的每个div编写css。所以我使用jquery来实现这个目标，但运气不好。代码如下：

HTML代码

<div class="row grid-items">
    <div class="item col-lg-4">
        Box 1
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 2
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 3
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 4
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 5
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 6
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 7
        <p></p>
    </div>
    <div class="item col-lg-4">
        Box 8
        <p></p>
    </div>
</div>

输出：

我需要z指数（8,7,6,5,4,3,2,1）

提前感谢

使用：

var len=$('.grid-items .item').length;
$('.grid-items .item').each(function(i){
    $(this).css('z-index',len-i)
});

解决方案2: 斜视是更好的方法

var len=$('.grid-items .item').length;
$('.grid-items .item').css('z-index', function(i){ return len-i; })

使用：

var len=$('.grid-items .item').length;
$('.grid-items .item').each(function(i){
    $(this).css('z-index',len-i)
});

解决方案2: 斜视是更好的方法

var len=$('.grid-items .item').length;
$('.grid-items .item').css('z-index', function(i){ return len-i; })

---

如果您想以开始时的方式实现这一目标：

为一个您可以使用的精确元素设置

z索引

如果你想以你已经开始的方式做到这一点：


为一个您可以使用的精确元素设置
z索引

您只能使用CSS和
：n子项
选择器执行此操作：

.grid-items div:nth-child(1) { //first one, give z-index of 8
    z-index:8;
}
.grid-items div:nth-child(2) { //second one, give z-index of 7
    z-index:7;
}
.grid-items div:nth-child(3) { //third one, give z-index of 6    
    z-index:6;
}

等等

您只能使用CSS和
：n子项
选择器执行此操作：

.grid-items div:nth-child(1) { //first one, give z-index of 8
    z-index:8;
}
.grid-items div:nth-child(2) { //second one, give z-index of 7
    z-index:7;
}
.grid-items div:nth-child(3) { //third one, give z-index of 6    
    z-index:6;
}

等等

我想你在
$j
之前错过了
var
。而且
$j
也不是jquery对象（或php变量），所以只需使用
j
几点，首先在DOM准备就绪时运行它，然后不要使用。每个都坚持使用for循环以获得更好的性能。我想你错过了
$j
之前的
var
。而且
$j
也不是jquery对象（或php变量），所以只需使用
j
几点，首先在DOM准备就绪时运行它，然后不使用。为了获得更好的性能，每个都要使用for循环。在循环中反复获取
$（'.grid items.item'）
。为什么？您是否希望
.length
更改？更好。：）另一个优化是执行
$（'.grid items.item'）.css（'z-index'，function（i）{return len-i；}）
，这样您就不需要每次迭代都创建一个新的jQuery对象。@squint:这很酷。我很熟悉文本方法能够做到这一点。我不知道使用.css（）有很多方法具有这种能力。我发现它们非常有用。@斜视缓存
$（'.grid items.item'）
会更好，以防止在DOM中进行两次搜索：）您在循环中反复获取
$（'.grid items.item'）
。为什么？您是否希望
.length
更改？更好。：）另一个优化是执行
$（'.grid items.item'）.css（'z-index'，function（i）{return len-i；}）
，这样您就不需要每次迭代都创建一个新的jQuery对象。@squint:这很酷。我很熟悉文本方法能够做到这一点。我不知道使用.css（）有很多方法具有这种能力。我发现它们是非常有用的。@眯着它会更好地缓存<代码> $（‘网格项目。项目）< /代码>以防止DOM中的两个搜索：）ReGeNT我在发布之前确实考虑过了，但是我觉得我的解决方案可以为那些可能寻找类似的东西的人增加这个问题的价值。在所有的问题都表明“我需要z-index（8,7,6,5,4,3,2,1）”而不是0-500:-）事实上，也有一种方法可以使用css
计数器来迭代元素并调整z-index。。。顺便说一下，是用一些计数器或单行<代码>来简化它吗？网格项目div：第n个子（xxx）{z指数：xxx；} > r>我在发布之前确实考虑过了，但是我觉得我的解决方案可能会为那些可能寻找类似的东西的人增加这个问题的价值。在所有的问题都表明“我需要z-index（8,7,6,5,4,3,2,1）”而不是0-500:-）事实上，也有一种方法可以使用css
计数器来迭代元素并调整z-index。。。我要试一试。顺便问一下，有没有任何方法可以使用一些计数器或单行
。网格项div:nth child（xxx）{z-index:xxx；}
？