6

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

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

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

4

3 回答 3

3

一些棘手的方法是，

创造新风格

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';
于 2013-09-09T06:41:26.923 回答
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);
于 2013-09-09T06:38:40.100 回答
1

在性能方面，@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 可能会非常快地完成单独的任务，但总和可能会导致总体放缓。

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

于 2013-09-09T07:57:51.383 回答