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

Question

这更像是一个知识问题，我需要对这个函数进行一些澄清。 第一种方法是我同事做的，第二方法是我做的。我不喜欢 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

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

<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 类，即使我们更改选择值，而其他人不这样做。