javascript - 使用查询将不同的 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>

J查询代码

$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