Используя JQuery, чтобы скрыть div, используя окно поиска

Question

Мои jQuery знания ограничены, и я попытался поискать ответ на свой вопрос по форуму, но я не могу найти какие-либо предлагаемые решения, и моя неопытность мешает мне увидеть, где происходят мои проблемы.

У меня есть страница с несколькими карточками, каждая из которых содержит больше элементов div и других текстовых элементов. Я хотел бы иметь возможность искать в окне поиска любые строки текста, которые могут быть где-либо в одной из этих карт, и скрывать остальные карты, которых нет.

Пока мне удалось получить это работает так, что мой поисковый запрос нечувствителен к регистру, и когда он находит совпадение, он скрывает все остальное в этой карточке.

Я чувствую, что я близко, но я не думаю, что смогу сделать это там самостоятельно.

      $(document).ready(function(){
        $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          $("#myDIV *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<div class="boxes" id="myDIV">
  <div class="card HCAM" data-type="HCAM">
    <div class="card-image"></div>
    <div class="card-text">
      <span class="date">4 days ago</span>
      <h2>Post One</h2>
      <p>Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae
        temporibus omnis illum maxime quod deserunt eligendi dolor</p>
    </div>
    <div class="card-stats">
      <div class="stat">
        <div class="value">4<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">5123</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">32</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1700" data-type="L1700">
    <div class="card-image card2"></div>
    <div class="card-text card2">
      <span class="date">1 week ago</span>
      <h2>Post Two</h2>
      <p>Adipisicing elit. Ducimus, repudiandae corrupti amet temporibus omnis provident illum maxime quod. Lorem ipsum dolor</p>
    </div>
    <div class="card-stats card2">
      <div class="stat">
        <div class="value">7<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">7152</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">21</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1500" data-type="L1500">
      <div class="card-image card3"></div>
      <div class="card-text card3">
        <span class="date">3 week ago</span>
        <h2>Post Three</h2>
        <p>Repudiandae corrupti amet temporibus omnis provident illum maxime. Ducimus, lorem ipsum dolor adipisicing elit</p>
      </div>
      <div class="card-stats card3">
        <div class="stat">
          <div class="value">5<sup>m</sup></div>
          <div class="type">read</div>
        </div>
        <div class="stat border">
          <div class="value">3021</div>
          <div class="type">views</div>
        </div>
        <div class="stat">
          <div class="value">15</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>
</div>

Answer 1

Вы должны присвоить уникальные class каждой карточке, чтобы ваш селектор был более точным (вы можете легко выбрать их как $(".card")). Для этого примера я просто выбрал всех дочерних элементов вашего div с идентификатором myDIV, перебрал их и скрыл / показал их, если они содержат текст из входного поиска. Также обратите внимание, что filter используется для фильтрации выбранных элементов, для запуска функции для каждого элемента предпочтительнее использовать команду jQuery each.

. код.

$(document).ready(function(){
        $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          
          $("#myDIV").children().each(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
          })
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<div class="boxes" id="myDIV">
  <div class="card HCAM" data-type="HCAM">
    <div class="card-image"></div>
    <div class="card-text">
      <span class="date">4 days ago</span>
      <h2>Post One</h2>
      <p>Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae
        temporibus omnis illum maxime quod deserunt eligendi dolor</p>
    </div>
    <div class="card-stats">
      <div class="stat">
        <div class="value">4<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">5123</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">32</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1700" data-type="L1700">
    <div class="card-image card2"></div>
    <div class="card-text card2">
      <span class="date">1 week ago</span>
      <h2>Post Two</h2>
      <p>Adipisicing elit. Ducimus, repudiandae corrupti amet temporibus omnis provident illum maxime quod. Lorem ipsum dolor</p>
    </div>
    <div class="card-stats card2">
      <div class="stat">
        <div class="value">7<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">7152</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">21</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1500" data-type="L1500">
      <div class="card-image card3"></div>
      <div class="card-text card3">
        <span class="date">3 week ago</span>
        <h2>Post Three</h2>
        <p>Repudiandae corrupti amet temporibus omnis provident illum maxime. Ducimus, lorem ipsum dolor adipisicing elit</p>
      </div>
      <div class="card-stats card3">
        <div class="stat">
          <div class="value">5<sup>m</sup></div>
          <div class="type">read</div>
        </div>
        <div class="stat border">
          <div class="value">3021</div>
          <div class="type">views</div>
        </div>
        <div class="stat">
          <div class="value">15</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>
</div>