jQuery更复杂的选择器与每个元素处理 [英] jQuery more complicated selector vs. each element processing
问题描述
我正在使用ez-checkbox插件,它只是将一个复选框包装到div中,因此复选框看起来更好。
I'm using ez-checkbox plugin, which simply wraps a checkbox into a div so checkboxes look better.
<div class="ez-checkbox ez-checked">
<input type="checkbox" checked autocomplete="off" class="ezmark ez-hide ez-init">
</div>
所以我有很多这些,我想点击查看所有这些。从性能的角度来看,哪些点击处理程序是最好的:
So I have many of these and I want check them all on click. Which of these click handlers is the best from the performance point of view:
首先 - 查找所有输入,过滤掉已经检查的输入,触发每个元素的点击事件,以便插件完成了它的工作。
First - find all inputs, filter out already checked ones, trigger click event for each element so that plugin done its job.
oPhotos
.find('input')
.not(':checked')
.each(function() {
$(this).click();
});
第二 - 与第一个相同,但我们自己做检查工作。
Second - same as first, but we do the "checking" job ourselves.
oPhotos
.find('input')
.not(':checked')
.each(function() {
$(this)
.prop('checked', true)
.parent()
.addClass('ez-checked');
});
第三 - 循环所有复选框,如果未选中当前 - 触发点击。
Third - loop all checkboxes, if current is not checked - trigger the click.
oPhotos
.find('input')
.each(function() {
if (! $(this).is(':checked')) $(this).click();
});
第四 - 循环所有复选框,如果未检查当前 - 请自行执行检查工作。 / p>
Fourth - loop all checkboxes, if current is not checked - do the "checking" job ourselves.
oPhotos
.find('input')
.each(function() {
if (! $(this).is(':checked')) {
$(this)
.prop('checked', true)
.parent()
.addClass('ez-checked');
}
});
推荐答案
我已经运行性能测试。事实证明,使用更复杂的选择器+过滤项目使用 .not()
+处理事件而不是触发它们是最快的选择。最糟糕的选择是循环所有元素以过滤它们并触发事件。
I've run performance tests. Turns out that using more complicated selectors + filtering items using .not()
+ handling events instead of triggering them is the fastest option. The worst option is to loop all elements to filter them and trigger an event.
这篇关于jQuery更复杂的选择器与每个元素处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!