Question

我有一个unordered list，其值最高为350。现在，在350中，我想为css的{{1}}值设置一个6属性。问题是我的list循环变得非常缓慢，因为我必须遍历每个each。是否有任何方法或逻辑可以优化每个循环下面的内容。下面的代码。

value

Answer 1

使用数组填充单词。比起您可以使用jQuery的.filter()方法和JavaScript的Array.prototype.includes：

const words = ["Cat", "Dog", "Mice"]; // <<< populate this one!
$('ul.list.available li').filter((i, el) => words.includes(el.textContent)).hide();

<ul class="list available">
  <li>Bicycle</li>
  <li>Cat</li>
  <li>Boat</li>
  <li>Dog</li>
  <li>Mice</li>
  <li>Computer</li>
</ul>


<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

jQuery filter
MDN Array.prototype.includes

Answer 2

这类似于另一个答案，但是允许您将多少个（在结束时用slice()发送给一个函数）和一个数组，然后添加一个类-其中可能包含隐藏的内容。因此，要将它们全部隐藏，只需将0传递给hideSome(0, testfilters);。您还可以修改此设置以隐藏所有最后6个，但您的问题和评论使您的意图有些变化/不清楚，因此此答案是

。

function hideSome(howMany = 6, testArr) {
  let things = $('ul.list.available').find('li');
  let filteredThings = things.filter(function(index, element) {
   return testArr.includes(element.innerText);
  });
  filteredThings
    .slice(-howMany)
    .addClass("what-to");
}
let testfilters = ["Cat", "Dog", "Buffalo", "Ant", "Mice", "Rat"];

hideSome(6, testfilters);

.what-to {
  border: solid red 1px;
}
.found{color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="list available">
  <li>I am 0</li>
  <li>I am 1</li>
  <li>Rat</li>
  <li>rat</li>
  <li>I am 4</li>
  <li>Mice</li>
  <li>I am 6</li>
  <li>Ant</li>
  <li>I am 8</li>
  <li>mice</li>
  <li>Cat</li>
  <li>Chicken</li>
  <li>Hog</li>
  <li>I am 13</li>
  <li>Ant</li>
  <li>Pant</li>
  <li>Mice</li>
  <li>Buffalo</li>
  <li>Rat</li>
  <li>The end</li>
</ul>
<div id="indicator"></div>

Answer 3

您将调用$函数7次（一次调用一次）。另外，设置一个计数器以指示何时隐藏了6也将节省大量迭代：

var counter = 0;

$('ul.list.available li').each(function() {
  var $this = $(this),
      text  = $this[0].innerText;

  if( text == 'Cat' || text == 'Dog' || text == 'Buffalo' || text == 'Ant' || text == 'Rat' || text == 'Mice' )
  {
    $this[0].style.display = 'none';
    counter++;
  } 

  if( counter == 6 )
  {
    return false;
  }
});

为大型列表优化每个循环的JQuery

3 个答案: