Jquery каждый не тянет все элементы с выбранным именем класса

Question

У меня есть страница с окном поиска и 5 Boostrap Cards. Я сделал так, чтобы карточки были спрятаны, если вы ищете в поле, и текст не соответствует тексту в атрибуте data-tags. Это работает, за исключением того, что не тянет карты. Он тянет карты только под первый контейнер card-deck. Он игнорирует все карты под второй. Я намеренно сделал атрибут data-tags как «ничто», а затем попытался найти:

Я сделал скрипку JS: https://jsfiddle.net/perezdev/krdgmuf4/7/

Если вы ищете «isol», должна появиться только первая карточка, так как эта фраза соответствует атрибуту:

Вот ядро ​​JS / Jquery:

$(".card").each(function () {
    var tags = $(this).attr('data-tags');

    if (tags !== undefined && tags !== null) {
      var matchIndex = tags.indexOf(text);
      if (matchIndex > -1) {
        $(this).show();
      }
      else {
        $(this).hide();
      }
    }
  });

Есть идеи, что я здесь делаю не так?

Answer 1

Возможно, попробуйте поместить data-tags в элемент card вместо элемента card-deck.Текущий код читает этот атрибут из card:

$(".card").each(function () {
    var tags = $(this).attr('data-tags');