「each」と「addClass回避策」は、ファイルがjQueryをロードするのがより簡単で簡単です

Question

これは、functionに関するいくつかの明確化を得るための知識の問題です。 第1方法は私の同僚によって行われ、第2私によって1つ。私はeachループのファンではなく、時にはそれを必要に応じて使用します。私が好きなのは、要素を操作してそれを使用することです（2番目の方法）。

私の質問は速く1Sトンまたは第二方法があるものでしょうか？ この機能には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"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <option value="6" class="hi">6</option> 
 
</select> 
 
</div> 
 
<div class="select_parent"> 
 
    <select class="test" data-id="2"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <option value="6" class="hi">6</option> 
 
</select> 
 
</div> 
 
<div class="select_parent"> 
 
    <select class="test" data-id="3"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <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"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <option value="6" class="hi">6</option> 
 
</select> 
 
</div> 
 
<div class="select_parent"> 
 
    <select class="test" data-id="2"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <option value="6" class="hi">6</option> 
 
</select> 
 
</div> 
 
<div class="select_parent"> 
 
    <select class="test" data-id="3"> 
 
\t <option value="1" class="hi">1</option> 
 
\t <option value="2" class="hi">2</option> 
 
\t <option value="3" class="hi">3</option> 
 
\t <option value="4" class="hi">4</option> 
 
\t <option value="5" class="hi">5</option> 
 
\t <option value="6" class="hi">6</option> 
 
</select> 
 
</div>

Answer 1

&のコードを他の人にも参考にしたいと思います。 一連のコードを完了するまでの時間を確認できます。以下では、コンソール上でコードを共有しました。各プロセスで必要な時間を確認できます（変更：各イベント）。

<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()なしeach() & 2を使用して）二つの異なるコードセクションことに注意しているが、あなたが期待している同じように動作していません。それはまた時間に影響するかもしれません。 1つ目は、.gotItクラスを選択した値を変更しても、他のクラスは選択しないようにします。

Answer 2

速度の差は、あなたがそれを心配する必要はありません2つの方法のように無視できるはずです。いくつかの異なるプラットフォーム、ブラウザのバージョンなどで深いベンチマーキングを行うことができますが、処理時間を本当に気にする必要がなければ、その努力がどのように価値があるのか​​分かりません。

ループに関しては、値などが予測可能である限り、ループを使用して選択入力を構築する方がしばしば簡単です。