Question

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

z-index

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

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

Answer 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);

Answer 3

在表现方面，@ Jaykishan Mehta的表现最好，然后是for-loop。

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可以很快完成单独的任务，但总和可能会导致整体放缓。

这一切都取决于您的应用/网站。

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

3 个答案: