Question

我最近收到了stackoverflow上的优秀人员的帮助，以帮助我在鼠标悬停事件中移动背景图像适当的距离。这很好用，但问题是我担心使用每个函数的最佳程度。

我希望我可以得到关于如何将这个特定代码转换为for循环的简短解释，因为我对优化的好处感兴趣，但是我不太了解如何转换它的语法差异到一个for循环。

var xPosition = -195;
$('div.style-swatches ul li').each(function(){
    $(this).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
});

Answer 1

只是不要使用.each()

Demo fiddle

$("div.style-swatches li").mouseenter(function() {
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
});

Answer 2

如果没有基准测试，请不要优化。首先分析您的代码，收集真实的数据，看看真正占用大量时间/内存的函数，然后优化发现的性能瓶颈

在您的特定情况下，我希望DOM查询比循环结构花费的时间多几个数量级。您可以考虑简化CSS查询（例如，如果合适，将div.style-swatches ul li更改为.style-swatches li），使用本机DOM而不是将所有内容包装在jQuery对象中，...

正如其他一些答案已经指出的那样，你实际上根本不需要循环，因为.mouseenter()已经这样做了（并且在内部使用了.each()循环）

Answer 3

任何选择都使用了封面下的for循环。基本上，任何时候你看到$（“。css-selector”）认为，“对于所有匹配的元素”。在你的代码中，.each（...）只会使过程更加明确。

如果你真的想把它分解成for循环，你可以使用你的选择器然后直接索引元素，la：

var elems = $('div.style-swatches ul li');
for (var i = 0; i < elems.length; ++i){
  $(elems[i]).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });

}

但同样，由于jQuery已经做到了这一点，所以你会看到任何有益的性能影响是值得怀疑的。

Answer 4

jquery选择器返回一个数组。你可以迭代它

var xPosition = -195;
var elements = $('div.style-swatches ul li');
for(var i = 0; i < elements.length; i++) {
    $(elements[i]).mouseenter(function() {
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
}

Answer 5

$（'div.style-swatches ul li'）返回项目数组..只需循环它

var xPosition = -195;
var items     = $('div.style-swatches ul li');

for (var i = 0, l = items.length; i < l; i++) {
    $(items[i]).mouseenter(function(){
        $(items[i]).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(items[i]).index() * 195)) + "px 0");
    });
}

jQuery：将每个函数转换为for循环

5 个答案: