Оптимизируйте JQuery для каждого цикла для больших списков - PullRequest
Новая
       22

Оптимизируйте JQuery для каждого цикла для больших списков

3 голосов
/ 19 сентября 2019

У меня есть unordered list, который имеет значения до 350.Теперь из 350 я хочу установить свойство css для 6 значений list.Проблема в том, что мой each цикл становится очень медленным, так как мне приходится перебирать все без исключения value.Есть ли способ или логика для оптимизации ниже каждого цикла.Ниже код. 

$('ul.list.available li').each(function()
{
  if($(this)[0].innerText == 'Cat' || $(this)[0].innerText == 'Dog' || $(this)[0].innerText == 'Buffalo' ||
          $(this)[0].innerText == 'Ant' || $(this)[0].innerText == 'Rat' || $(this)[0].innerText == 'Mice' )
  {
         $(this)[0].style.display = 'none';
  }
});

Ответы [ 3 ]

4 голосов
/ 19 сентября 2019

Используйте массив, чтобы заполнить ваши слова.Чем вы можете использовать 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
MDN Array.prototype.includes

1 голос
/ 19 сентября 2019

Это похоже на другой ответ, но позволяет вам посылать, сколько (затем END с 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>
0 голосов
/ 19 сентября 2019

Вы вызываете функцию $ 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;
  }
});
...