Как посчитать количество элементов jquery?

Question

[struhovv]

Как показать количество элементов с классом element в span и обновлять его каждый раз после сортировки в select?

<select>
    <option value="*">Все</option>
    <option value="f1" <?php if($filter=='f1' ) echo 'selected'; ?>>Фильтр1</option>
    <option value="f2" <?php if($filter=='f2' ) echo 'selected'; ?>>Фильтр2</option>
    <option value="f3" <?php if($filter=='f3' ) echo 'selected'; ?>>Фильтр3</option>
    <option value="f4" <?php if($filter=='f4' ) echo 'selected'; ?>>Фильтр4</option>
  </select>
  <div class="element f1">Элемент1</div>
  <div class="element  f2">Элемент2</div>
  <div class="element  f2">Элемент2-2</div>
  <div class="element  f2">Элемент2-3</div>
  <div class="element  f2">Элемент2-4</div>
  <div class= element f3">Элемент3</div>
  <div class="element  f4">Элемент4</div>
</div>

<div>Всего элементов:  <span class="sum">7</span></div>

Answer 1

[0xD34F]

$('select').change(function() {
  const v = this.value;
  $('.sum').text($(`.element${v === '*' ? '' : `.${v}`}`).length);
});

или

document.querySelector('select').addEventListener('change', e => {
  const v = e.target.value;
  const s = '.element' + (v === '*' ? '' : '.' + v);
  document.querySelector('.sum').textContent = document.querySelectorAll(s).length;
});