Фильтр вложенных DIV с JQuery

Question

Это структура HTML у меня есть:

<div class="day"> 
    <div class="date"> 
     ... 
    </div> 
    <div class="event-container"> 
     <div class="event">...</div> 
     <div class="event">...</div> 
     ... 
     <div class="event">...</div> 
    </div> 
</div> 

Я хочу, чтобы фильтровать эту структуру, содержание .event. Если какое-либо из слов в поисковом запросе отсутствует в элементе .event, оно должно быть скрыто. Если все .event s в .event-container скрыты, весь .day должен быть скрыт.

Вот моя попытка:

var terms = query.split(" "); 

$('.day').each(function() {   //iterate over days 
    var matches = false;    //does the day contain a valid event? 

    $(this).find('.event').each(function() { //iterate over events of this day 
     var evMatches = true;   //does this event contain all terms? 

     $.each(terms, function (index, term) { //iterate over terms 
      if ($(this).text().search(new RegExp(term, "i")) < 0) 
       evMatches = false; //if any term isn't found, element is invalid 
     }); 

     if (evMatches) //if event contained query 
     { 
      matches = true; //day contains valid event 
      $(this).show(); 
     } 
     else 
      $(this).hide(); 

    }); 

    if (matches) //if day contains valid event 
     $(this).show(); 
    else 
     $(this).hide(); 
}); 

Я получаю "Uncaught RangeError: Максимальный размер стека вызовов превышена".

Я считаю, что делаю что-то не так в $.each(terms, ...) или $(this).find('event-entry').each(...), потому что я недостаточно понимаю эти утверждения, просто пытаясь объединить это из примеров и документов jquery.

Answer 1

this не так, как вы думаете, находится внутри петли terms. Он имеет новый контекст из each, который выполняет итерации элементов

Вы не можете использовать this внутри каждого цикла, который выполняет итерацию массива строк.

Если у вас вложенные петли хранятся любые ссылки this, чтобы вы знали, с какими this вы имеете дело.

Также попробуйте для хранения значений, которые не изменяются, так что вы не должны смотреть то же самое на много много раз

$('.day').each(function() {   
    var matches = false;    

    var $day = $(this); // store `$(this)` reference 

    $day.find('.event').each(function() { 
     var evMatches = true;   

     var $event = $(this), eventText = $event.text(); 

     $.each(terms, function (index, term) { 
      // use stored text value instead of looking it up each time 
      if (eventText.search(new RegExp(term, "i")) < 0) 
       evMatches = false;  
     }); 

     if (evMatches) //if event contained query 
     { 
      matches = true; //day contains valid event 
      $event.show(); 
     } 
     else 
      $event.hide(); 

    }); 

    if (matches) //if day contains valid event 
     $day.show(); 
    else 
     $day.hide(); 
});