优化大列表的jQuery Each循环：350项列表快速设置指定项CSS

嘿，这个问题我太熟了——遍历350个元素还逐个做文本判断，再加上反复的DOM-JQ对象转换，确实会拖慢速度，完全是没必要的开销。咱们来一步步优化，让这段代码快起来：

把要匹配的文本存成数组，用filter一次性筛选出符合条件的元素，再统一设置样式，避免遍历所有元素：

// 先把目标文本存成数组，方便判断
const targetTexts = ['Cat', 'Dog', 'Buffalo', 'Ant', 'Rat', 'Mice'];
// 直接筛选出符合条件的li，再批量设置样式
$('ul.list.available li').filter(function() {
  return targetTexts.includes(this.innerText.trim()); // 加trim防止空格干扰匹配
}).css('display', 'none');

为什么这更快？filter会帮你只处理符合条件的元素，而且把多个||判断换成数组includes更简洁高效，同时避免了每次循环都重复调用$(this)[0]的冗余操作。

如果项目里可以不用jQuery，原生JS的性能会更好——少了一层封装开销，速度提升很明显：

// 用Set存目标文本，查找速度比数组更快（O(1) vs O(n)）
const targetTexts = new Set(['Cat', 'Dog', 'Buffalo', 'Ant', 'Rat', 'Mice']);
const lis = document.querySelectorAll('ul.list.available li');

for (const li of lis) {
  if (targetTexts.has(li.innerText.trim())) {
    li.style.display = 'none';
  }
}

这里用Set来存目标文本，因为它的查找效率比普通数组高，尤其是当目标文本数量增加时优势更明显。原生的querySelectorAll和循环操作，比jQuery的遍历机制开销小很多。

如果这些li是后端渲染或者可以提前控制的，最好直接给它们加个类名（比如hide-target），然后用CSS直接控制：

.hide-target { display: none; }

这是最高效的方式——完全不用JS参与，浏览器直接用CSS渲染处理，性能拉满。

额外提醒：innerText可能会受文本前后的空格、换行影响，所以加个trim()处理一下，避免因为无关空格导致匹配失败。

内容的提问来源于stack exchange，提问作者sTg