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

Question

我想将z-index应用于每个嵌套的div。它很难为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>

Jquery代码

$no_of_items = $('.grid-items .item').length;
for ($j = $no_of_items; $j > 0; $j--) {
    console.log($j);
    $('.grid-items .item').css('z-index', $j);
};

输出：

我需要z-index（8,7,6,5,4,3,2,1）

提前致谢

Answer 1

使用：

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

解决方案2： Squint更好的方法。

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

<强> Working Demo

Answer 2

如果你想以你开始的方式制作它：

Fiddle

要为一个确切元素设置z-index，您可以使用.eq()。

$(document).ready(function()
{
    var items = $('.grid-items .item');
    var $no_of_items = items.length;
    for (var $j = $no_of_items; $j > 0; $j--)
    {
        items.eq($no_of_items - $j).css('z-index', $j);
    };
});

Answer 3

您只能使用CSS :nth-child选择器执行此操作：

.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;
}

依旧......

http://jsfiddle.net/wf_4/2mu6jhn0/