有没有办法在不迭代的情况下将匹配元素的 z-index 增加 1？答案

【问题标题】：Is there a way to increase the z-index of matched element by 1, without iteration?有没有办法在不迭代的情况下将匹配元素的 z-index 增加 1？
【发布时间】：2013-09-09 06:29:40
【问题描述】：

我必须将 z-index 增加 1，在所有 span 和类 .page 中。可以有超过 100 个匹配的元素（在任何情况下都不超过 150 个）。现在我正在遍历它们中的每一个并通过以下代码更改z-index。

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

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

【问题讨论】：

你知道你可以通过重新排序元素来模拟 zIndex 效果吗？最后一个元素（具有相同 zIndex 的组）出现在最上面。这就是现在 jQuery UI 处理可拖动堆叠的方式。
@Alnitak 你是对的。但是我需要一种所有元素的堆叠，以获得一些动画效果。这就是为什么我没有采用这个解决方案。顺便提一句！感谢您指出这一点。
它们都将按 DOM 顺序堆叠（我关于最后一个元素的观点只是一个示例）

标签： javascript jquery performance dom

【解决方案1】：

一些棘手的方法是，

创建新样式

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';

【讨论】：

创意思维！我喜欢。 +1。与其他方法相比，看看这对性能的影响会很有趣。
@JaykishanMehta 在这里，我必须为该元素的 z-index 的初始值添加 +1。
@deepak 您可以将 z-index 的当前值存储为全局变量（在页面加载时）。根据情况进行更新。
但请检查@EthanBrown 所说的性能影响

【解决方案2】：

最好的方法是重写您的逻辑，使其不依赖于元素样式中的统一增量 z-index。如果你只运行过一次这个逻辑，也许你可以设置一些通用的 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);

【讨论】：

几乎......它需要是function(index,value) { return parseInt(value,10) + 1; }。您使用的.css 方法首先获取所选元素的索引，然后是值。不过，很好地使用 jQuery，+1。
@loganfsmyth 在那种情况下，如果我使用 vanila javascript，我猜会更快。
@deepak 慢的不是 JS，jQuery 或 vanilla，你所做的只是非常丑陋。我现在正在添加一项建议。

【解决方案3】：

就性能而言，@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;
}

大量使用 jQuery，即每次迭代等，可能会全局减慢。

我的意思是 jQuery 可能会很快地执行单独的任务，但总和可能会导致总体速度变慢。

这完全取决于您的应用/网站。

【讨论】：