'each' 和 'addClass workaround' 让文件加载 jQuery 更快更容易

Question

这对我来说更像是一个知识问题，以了解有关此function 的一些说明。 第一种方法由我的同事完成，第 2 种方法由我完成。我不是each 循环的粉丝，有时我会根据需要使用它，我喜欢操纵元素并使用它（第二种方法）。

我的问题是 1st 或 2nd 方法哪个更快？ 我们可以使用foreach 来实现这个功能吗？会更好吗？

$('select.test').on('change', function() {
  var option_val = $(this).val(),
    option_data_val = $(this).data('id');
  $('select.test').each(function() {
    if ($(this).data('id') != option_data_val) {
      $(this).find('option[value="' + option_val + '"]').addClass('gotIt');
    }
  });
});

.gotIt{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_parent">
  <select class="test" data-id="1">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>
<div class="select_parent">
  <select class="test" data-id="2">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>
<div class="select_parent">
  <select class="test" data-id="3">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>

$('select.test').on('change', function() {
  var option_val = $(this).val();
  $('select.test').addClass('dummy-class');
  $(this).closest('.select_parent').find('select.test').removeClass('dummy-class');
  $('select.test option').removeClass('gotIt');
  $('select.test.dummy-class option[value='+option_val+']').addClass('gotIt');
});

.gotIt{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_parent">
  <select class="test" data-id="1">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>
<div class="select_parent">
  <select class="test" data-id="2">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>
<div class="select_parent">
  <select class="test" data-id="3">
	<option value="1" class="hi">1</option>
	<option value="2" class="hi">2</option>
	<option value="3" class="hi">3</option>
	<option value="4" class="hi">4</option>
	<option value="5" class="hi">5</option>
	<option value="6" class="hi">6</option>
</select>
</div>

Answer 1

这两种方法之间的速度差异应该可以忽略不计，您不必担心。您可以跨多个不同的平台、浏览器版本等进行一些深入的基准测试，但除非您需要对处理时间非常挑剔，否则我看不出这有什么值得付出的努力。

至于循环，只要值等是可预测的，使用循环构建选择输入通常更容易。

Answer 2

我想与您分享一段代码，并且可能对其他人也有帮助。 可以看到完成一组代码的时间。下面我在您的控制台上分享了一个代码，您可以看到每个进程所需的时间（在每个事件上：更改）。

<script>
//  On 1 set of your code
$('select.test').on('change', function() {
    start_time = new Date().getTime();
    var option_val = $(this).val(),
    option_data_val = $(this).data('id');
    $('select.test').each(function() {
        if ($(this).data('id') != option_data_val) {
            $(this).find('option[value="' + option_val + '"]').addClass('gotIt');
        }
    });
    request_time = new Date().getTime() - start_time;
    console.log(request_time);
});
</script>

<script>
//  On 2 set of your code
$('select.test').on('change', function() {
    start_time = new Date().getTime();
    var option_val = $(this).val();
    $('select.test').addClass('dummy-class');
    $(this).closest('.select_parent').find('select.test').removeClass('dummy-class');
    $('select.test option').removeClass('gotIt');
    $('select.test.dummy-class option[value='+option_val+']').addClass('gotIt');
    request_time = new Date().getTime() - start_time;
    console.log(request_time);
});
</script>

而且，我还注意到您的两个不同代码部分（1. 使用 each() 和 2. 不使用 each() ）的工作方式与您期望的方式不同。所以这也可能影响时间。第一个，保留.gotIt 类，即使我们更改了选择值，而其他人没有这样做。