【发布时间】：2013-05-25 05:27:32
【问题描述】：
我有一长串 DOM 元素，我从中获取属性以保存到对象中。
一遍又一遍地使用 jQuery 选择器似乎是对 DOM 操作的过度使用。
var a = $('input[name=a]:checked').val(),
b = $('input[name=b]')is(':checked'),
c = $('input[name=c]').val();
我认为可能有一种方法可以执行var $form = $('#form'); 之类的操作，然后使用$form.find('input[name=a]:checked') 或$form.children('input[name=b]') 或$form.filter('input[name=c]')。但是这些例子都没有了。我相信因为我没有选择元素本身，所以选择它们的父元素不会阻止 jQuery 不得不反复阅读 DOM。这是真的吗？
另一种选择可能是专门为此 (:/) 向所有元素添加另一个类，但出于某种原因，这似乎很奇怪。不过，它会给我一个数组，我认为我可以用它来防止重复的 DOM 遍历？像这样的：
var $formElementArray = $('.the_elements_you_wanted');
然后使用过滤器？
var a = $formElementArray.filter('input[name=a]:checked').val(),
b = $formElementArray.filter('input[name=b]')is(':checked'),
c = $formElementArray.filter('input[name=c]').val();`
这是最好的方法吗？这种事情有最佳实践吗？ 我必须专门添加一个类来防止过多的 DOM 遍历似乎有点蹩脚，因为我正在操作的一些元素不会被组合在一起，但如果是这样的话，c'est la vie .
【问题讨论】：
-
如果元素很多，最好的方法是使用
.filter()方法。如果您担心性能，请使用 Vanilla JavaScript 而不是 jQuery。 -
所有性能问题都应该通过在 jsFiddle 等性能测量框架中测试您的替代方案来解决。最好的办法是将 id 放在这些元素上，以便您可以直接使用
document.getElementById('myInputA')或$('#myInputA')选择它们，如果您仍想使用 jQuery。 -
您是否同时拥有页面上的所有元素，或者您会在页面加载后动态添加更多元素？您的完整 HTML 是什么样的？你想从 DOM 节点获取什么东西？只是
:checked和val()？ -
@Dogbert 在这种情况下，我没有动态添加元素，是的——到目前为止只是检查和验证。不要以为我必须检查这些以外的任何东西。
标签： jquery performance dom