Javascript 有没有办法将匹配元素的z索引增加1，而不进行迭代？

我必须将类

.page

的所有

span

中的

z-index

增加1。匹配的元素可以超过100个（在任何情况下都不超过150个）。现在我正在迭代它们中的每一个，并通过下面的代码更改

z-index

  $('#mydiv span.page').each(function() {
    var zi = parseInt($(this).css('z-index')) + 1;
    $(this).css('z-index', zi);
  });

---

是否有更好的方法来处理它以获得更好的性能。我正在使用jQuery。

最好的方法是重写您的逻辑，使其不依赖于元素样式中的统一增量z索引。如果您只运行过一次这个逻辑，也许您可以设置一些通用的CSS规则，只需要切换一个类就可以实现您想要的布局。假设这不是一个选项，那么您就没有什么办法让它更具性能了

您可以暂时分离“#mydiv”元素以减少页面重新绘制，但如果没有更多信息，就很难提供更多帮助，这可能会混淆其他内容

var div = $('#mydiv');
var prev = div.prev();
div.detach();

// You can clean up your jQuery like this:
div.find('span.page').css('z-index', function(index, zIndex) {
    return parseInt(zIndex, 10) + 1;
});

div.insertAfter(prev);

有些棘手的方法是

创造新风格

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { z-index: value; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('yourElementId').className = 'cssClass';

---

就性能而言，@Jaykishan Mehta的一个是最好的，然后是for循环

for (var i = 0, spans = document.querySelectorAll('#mydiv span.page'), len = spans.length; i < len; i += 1) {
    spans[i].style.zIndex = parseInt(spans[i].style.zIndex, 10) + 1;
}

for（var i=0，span=document.querySelectorAll（'#mydiv span.page'），len=span.length；i

大量使用jQuery，即对于每个迭代等，可能会在全局上降低速度

我的意思是，jQuery可以相当快地完成不同的任务，但其总和可能会导致总体的速度减慢

---

这完全取决于你的应用程序/网站。

几乎……它需要是

函数（索引，值）{return parseInt（值，10）+1；}

。您使用的

.css

方法首先获取选定元素的索引，然后获取值。不过，jQuery使用得很好，+1。@loganfsmyth在这种情况下，如果我使用vanila javascript，我想会更快。@deepak不是JS慢，jQuery或香草，你所做的只是相当丑陋。我现在添加一个建议。创造性思维！我喜欢+1.与其他方法相比，这对性能的影响将是非常有趣的。@JaykishanMehta这里我必须将+1添加到该元素的z-index的初始值。@deepak您可以将z-index的当前值存储为全局变量（在页面加载时）。并根据情况进行更新。但请检查@EthanBrown所说的性能影响。您是否知道只需重新排列元素即可模拟zIndex效果？（具有相同zIndex的组的）最后一个元素显示在最上面。这就是jQueryUI现在处理可拖动堆叠的方式。@Alnitak你说得对。但是我需要一种所有元素的堆叠，一个在另一个之上，以获得某种动画效果。这就是为什么我没有采用这个解决方案。顺便提一下感谢您提出这一点。它们都将按DOM顺序堆叠（我关于最后一个元素的观点只是一个示例）