使用javascript或jquery更改多个div的z-index [英] change the z-index of multiple div using javascript or jquery

问题描述

有多个 div ，我想在其中应用不同的 z-index ，如下所示：

 < div class =containerstyle =z-index：4> 
< / div> 
< div class =containerstyle =z-index：3> 
< / div> 
< div class =containerstyle =z-index：2> 
< / div> 
< div class =containerstyle =z-index：1> 
< / div> 
  

编辑：使用上述代码可以显示box-shadow。输出就像 HERE 。在这种情况下，我需要手动写入 z-index 给每个 div ，所以我试着让它自动说出自动。我认为这将是可能的与JS或JQuery。

所以，这里是 demo ，我尝试使用javascript给 z-index 。但是它不起作用。

在这里，我找到了一些引用，但我无法应用它。

Link1 ，Link2 ， Link3 ， Link4

如何使用javascript或jquery将不同的 z-index 应用于多个 div ？或者还有其他方法吗？

解决方案

您没有在您的jsFiddle中包含jquery，并试试这个：

  $（function（）{
 var box = $（div）; 
 var z = 4; 
 boxes.each（function（）{
 $（this）.zIndex（z--）; 
}）; 
}）; 
  

还包括jquery UI。

< a href =http://jsfiddle.net/m3923k1x/9/ =nofollow> DEMO

There are multiple div to which I want to apply different z-index like below:

<div class="container" style="z-index:4">
 </div>
<div class="container" style="z-index:3">
 </div>
<div class="container" style="z-index:2">
 </div>
<div class="container" style="z-index:1">
 </div>

EDIT: Using above code the box-shadow is able to display. Output is like HERE. In this case I need to write z-index manually to each div so I am trying to make it lets say automatic. I thought this will be possible with JS or Jquery.

So, here is demo on which I am trying to give z-index using javascript. But its not working.

Here as below, I found some references but I am not able to apply it.

Link1 , Link2, Link3, Link4

How do I apply different z-index to multiple div using javascript or jquery? Or is there any other way?

解决方案

You have not included jquery on your jsFiddle and try this:

$(function() {
  var boxes = $("div");
  var z = 4;
    boxes.each(function() {
        $(this).zIndex(z--);
    });
});

Also include jquery UI.

DEMO

这篇关于使用javascript或jquery更改多个div的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！