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

我最近在stackoverflow上得到了很多人的帮助，帮助我在mouseover事件中移动适当的距离。这很好，但问题是我关心它是如何使用每个函数最佳。jQuery：将每个函数转换为for循环

我希望我可以得到一个简单的解释，如何将这个特定的代码转换为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"); 
    }); 
});

来源

2013-10-30 Brett D

对于一个对转换不够了解的人来说，你听起来非常确定将其转换为循环将会“优化”它。 – Jon

你在技术上已经在使用for循环; jQuery只是为你做的。 – ps2goat

由于这基本上是'jQuery'为你做的事情，所以性能增益将会很小（如果有的话） – megawac

只要不使用.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"); 
});

来源

2013-10-30 22:43:09

不错，我忘了你可以直接分配内部和jQuery循环。此外，IIRR jQuery使用循环展开/展开封面下的速度优化 – Robert

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

如果你真的想打破这一伸到一个for循环，你可以用你的选择，然后指数的直接元素，一拉：

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的已经这样做本身，它的怀疑你会看到任何有利的性能影响。

来源

2013-10-30 22:42:40 Gopherkhan

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"); 
    }); 
}

来源

2013-10-30 22:42:43 Thomas

$（ 'div.style-样本UL礼'）收益和项目的数组。 .just循环它

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"); 
    }); 
}

来源

2013-10-30 22:43:42 Robert

从不优化没有基准。首先剖析你的代码，收集真实数据，看看有什么功能调用真的占用大量时间/内存，然后然后优化发现的性能瓶颈。

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

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

来源

2013-10-30 22:44:02

这是很好的建议。感谢您分享它并扩展简化CSS查询。非常感激。 –

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

回答

相关问题