Question

我有这样安排的div：

<div id='div1' style='z-index:50'>1<div>
<div id='div2' style='z-index:200'>2<div>
<div id='div3' style='z-index:60'>3<div>
<div id='div4' style='z-index:100'>4<div>

我喜欢用jquery重新排列z-index，如下所示：

<div id='div1' style='z-index:1'>1<div>
<div id='div2' style='z-index:4'>2<div>
<div id='div3' style='z-index:2'>3<div>
<div id='div4' style='z-index:3'>4<div>

有人知道我该怎么做

谢谢你约阿夫

Answer 1

您可以通过获取元素，按z-index对集合进行排序，然后迭代并使用索引来设置新的z-index来实现。这不会影响DOM中的元素位置，我们只会重新排列集合。

$('[id^="div"]').sort(function(a, b) {
    return a.style.zIndex - b.style.zIndex;
}).css('z-index', function(i) {return i+1;});

FIDDLE

请注意，您必须关闭DIV元素才能使其正常工作

Answer 2

您通常可以使用jQuery的.css();函数，但由于您的样式直接在HTML中，因此不会覆盖它。您可以使用.attr()：

例如：

$('#div1').attr('style','z-index:1');

如果需要，您可以执行此操作4次，并输入您自己的值。

重新排列z-index

2 个答案: