jQuery – z-index操作和自动值而不是数字

当您add new按钮时，jQuery dragrable DIVs新的可dragrable DIVs插入到CONTAINER 。 当我点击其中一些DIVs ，我想更改z-index值。 但是jQuery无法将z-index值作为数字。 它只显示'auto' …是否有解决方案显示真正的z-index值并将其increase it by 1 ？

jsFiddle示例 – http://jsfiddle.net/ynternet/84nVQ/10/

HTML

 
 add new 
 
  

jQuery的

 function handler() { if ($(this).find("#menu").length) { return; } var currentIndex = $(this).css('z-index'); alert(currentIndex); var newIndex = currentIndex + 1; alert(newIndex); $(this).css('z-index', newIndex); } $("#add").on({ click: function(e) { var timestamp = Date.now(); var posx = Math.floor(Math.random() * 400); var posy = Math.floor(Math.random() * 400); $('#container').append(function() { return $('
Click me, drag a change z-index
').click(handler).draggable({ containment: "#container", scroll: false, cursor: 'lock' }); }); } }); 

CSS

 #container { width:500px; height:500px; background: palegoldenrod; position: relative; top:20px; left: 100px; padding: 0px; } .add_to_this { padding:5px; background:yellowgreen; position: absolute; display:inline-block; width:200px; height:50px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select: none; } 

Answer 1

代码中的两个问题：

• 你没有真正的z-index ，因为你没有设置它，所以你有'auto'
• 您将z-index为字符串，因为您不解析它

你需要做什么 ：

• 在css中添加一个z-index ： z-index:100;
• 解析z-index ： var currentIndex = parseInt($(this).css('z-index'), 10);

演示 （没有警报，因为他们很烦人）