jquery - 使用 filter() 或 each() 将方法应用于一组 DOM 元素是否更好

Question

Let's say I have a page that shows a default set of DOM elements on page load, and once the page loads, I want to go in and hide certain elements.

HTML

<div id="container">
    <ul>
        <li id="blue">BLUE</li>
        <li id="red">RED</li>
        <li id="green">GREEN</li>
        <li id="orange">ORANGE</li>
        <li id="violet">VIOLET</li>
        <li id="teal">TEAL</li>
        <li id="black">BLACK</li>
    </ul>
</div> 

JavaScript #1

var valid = ['red', 'green', 'blue'];
var $colors = $('li');
$colors
  .hide()
  .filter(function() {
      return valid.includes(this.id);
  })
  .show();

JavaScript #2

var valid = ['red', 'green', 'blue'];
var $colors = $('li');
$colors.show();
$colors.each(function() {
    if(!valid.includes(this.id) {
        $(this).hide();
    }
});

Assuming the "real" use case has thousands of colors, which JavaScript approach would be the more efficient?

Answer 1

Neither. Loop through the IDs and show them.

$colors.hide();
valid.forEach(id => $(`#${id}`).show());

Or you can create a single selector by combining all the IDs in valid :

$colors.hide();
valid_selector = valid.map(id => `#${id}`).join(',');
$(valid_selector).show();