'each'和'addClass解決方法'，這是更快，更容易文件加載jQuery

這是一個知識問題，我要獲得關於這個function一些澄清。 1st方法由我的同事完成，並且第二個一個由我完成。我不是each循環的粉絲，有時我將它用作需要，我喜歡的是操縱元素並使用它（第二種方法）。'each'和'addClass解決方法'，這是更快，更容易文件加載jQuery

我的問題是，這是更快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>

來源

2017-07-31 weBBer

_「我的問題是哪個是更快的第一或第二種方法？」_您是否自己執行了基準測試？ – guest271314

@ guest271314，不 - 實際上是有辦法做到的。？ – weBBer

請參閱[在jQuery中爲子選擇器使用find（）而不是>效率更高嗎？]（https://stackoverflow.com/questions/39993827/is-it-more-efficient-to-use-find-rather -than換子選擇器功能於jQuery的/） – guest271314

我想與你分享一段代碼&也許對其他人有幫助。您可以看到完成一組代碼的時間。下面我已經在你的控制檯上共享了一段代碼，你可以看到每個進程所需的時間（在每個事件上：更改）。

<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類，即使我們改變選擇值，而其他人不這樣做。

來源

2017-08-01 06:19:53 Sinto

速度的差別應該是，你不必擔心它的兩種方法之間，可以忽略不計。你可以在幾個不同的平臺，瀏覽器版本等上做一些深入的基準測試，但是除非你需要對處理時間真的很挑剔，否則我看不出這是值得付出的努力。

至於循環，只要值是可預測的，使用循環構建選擇輸入通常更容易。

來源

2017-07-31 05:06:14 Difster

'each'和'addClass解決方法'，這是更快，更容易文件加載jQuery

回答

相關問題