更改z-index以使单击的div显示在顶部
在我的应用程序中，我可以打开几个相互重叠的div框。 单击框时应将该框移动到顶部。 完成此任务的最佳方法是什么？
我唯一能想到的是循环遍历所有框z-index值以获得最高值，然后将1添加到该值并将其应用于单击的div。
对我有什么建议吗？
这样的事情应该这样做：
// Set up on DOM-ready $(function() { // Change this selector to find whatever your 'boxes' are var boxes = $("div"); // Set up click handlers for each box boxes.click(function() { var el = $(this), // The box that was clicked max = 0; // Find the highest z-index boxes.each(function() { // Find the current z-index value var z = parseInt( $( this ).css( "z-index" ), 10 ); // Keep either the current max, or the current z-index, whichever is higher max = Math.max( max, z ); }); // Set the box that was clicked to the highest z-index plus one el.css("z-index", max + 1 ); }); }); 假设你有一个特定类的元素（在我的例子中为“box”），并且所有元素都在同一容器中，如下所示：
假设你有正确的CSS：
.box {position:absolute; z-index:10}
您可以使用下面的jquery js代码：
$('.box').click(function() { // set ohters element to the initial level $(this).siblings('.box').css('z-index', 10); // set clicked element to a higher level $(this).css('z-index', 11); });
我会通过制作一个jQuery插件来解决这个问题，因此您不必担心手动设置z-index并使用变量跟踪最高值：
(function() { var highest = 1; $.fn.bringToTop = function() { this.css('z-index', ++highest); // increase highest by 1 and set the style }; })(); $('div.clickable').click(function() { $(this).bringToTop(); });
如果您使用页面上的任何其他代码设置z-index ，这将无法正常工作。
你可以用jquery做这样的事情：
$（’＃div’）。click（function（）{$（this）.css（’zIndex’，’10000′}）;
只要所有底层div的z-index低于10000，这都可以工作。或者，您可以编写一个函数来迭代所有div并获得最高的z-index并将单击的数字移动到该数字+1。
你认为获得最高z指数的想法是我想要的。
但是，不是在每次单击时循环遍历它，我只在页面加载时循环它一次并维护一个存储最高z-index的对象。
CONSTANTS = { highest_z_index = 0; }; function getHighestZ (){ var $divs = $('div'); $.each($divs,function(){ if (this.css('z-index') > CONSTANTS.highest_z_index){ CONSTANTS.highest_z_index = this.css('z-index'); } }); } getHighestZ(); $('#YourDiv').click(function(){ if (CONSTANTS.highest_z_index > $(this).css('z-index'){ $(this).css('z-index',++CONSTANTS.highest_z_index); } });
简单！ $(".classname").on("click",function(){$(".classname").css('z-index',0);$(this).css('z-index',1);});