Блог

У меня есть строка, которая автоматически заполняется данными из api. Каждый результат из api сохраняется в div, который также создается с помощью js, а затем к нему добавляется класс.

Затем у меня есть фильтр, подключенный к окну поиска, который фильтрует результаты и показывает соответствующие данные. Разделам, у которых нет поискового запроса, присваивается новый класс «скрыть», который их скрывает. Всякий раз, когда выполняется поиск, я хочу выполнить поиск по заполненной строке и выяснить, сколько divs имеют класс «скрыть», но, похоже, я пока не могу найти рабочее решение.

Вот как выглядит структура кода

 <div class="row">
   <div class="data"></div>
   <div class="data"></div>
   <div class="data"></div>
   <div class="data hide"></div>     <!-- this is what itll look like for hidden divs -->
   <div class="data hide"></div>
</div>
 

Могу ли я использовать childelementcount в дополнение к classlist.contains(), чтобы решить эту проблему? Или что такое прогулка по кругу?

Один из подходов к решению этой проблемы заключается в использовании querySelectorAll() :

 var list = document.getElementById('list');

var count = list.querySelectorAll('.data.hide').length;

console.log(count);
 

Пожалуйста, обратите внимание, что я добавил an id к row элементу, чтобы упростить доступ к нему:

 <div id="list" class="row">
   <div class="data"></div>
   <div class="data"></div>
   <div class="data"></div>
   <div class="data hide"></div> 
   <div class="data hide"></div>
</div>
 

Вот живая демонстрация для вашего краткого ознакомления.