jquery - 如何在堆叠的 div 上反转 z-index

Question

我在一个页面上有多个列以这种方式包裹在 div 中:

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

我基本上是在使用一个插件来对文本进行分栏并将它们从左到右定位。在我的 css 中，我重新定位它们，使它们相互堆叠，然后我使用一些 jquery 将每一列移开。问题是，它们以错误的顺序堆叠。最后一列在第一列，第一列在底部。

这是 CSS

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

如何更改堆叠顺序？使用 jQuery 为每个 div 添加 z-index 是最好的解决方案吗？我不完全是怎么做到的，JS不是我的强项。这对我来说也有点脆弱。有没有办法简单地颠倒堆叠顺序？这是我非常简单的 jQuery:

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});

Answer 1

这是我最终得到的结果:

$('.column').each(function(i, c) {
        $(c).css('z-index', num - i);
    });

其中 num 实际上是页面上的列数，加上基于其他元素中最高 z-index 的任意数量。