Показать весь div с фильтром jquery?

У меня есть этот код, который возвращает только текстовые значения из #myDIV. У этого div есть раздел внутри, который содержит несколько div (список продуктов) с изображениями, текстами и подписями к изображениям. Мой фильтр работает как с заголовком, так и с текстом (это то, что я хотел), но возвращает только текстовые значения. Заголовки возвращаются как пустой результат, а изображения вообще не отображаются. Я хочу вернуть все 3 (текст / подпись / изображение).

P.S Раздел содержит несколько 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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id = "myInput" type = "text" placeholder = "Search..">
<div id = "myDIV">
  <section class = "extShop featuresLink cid-rZqXvAXY2V" id = "extShop2-aj">
    <div class = "container px-3">
      <div class = "row justify-content-center">
        <div class = "card p-3 col-12 col-md-6 col-lg-3">
          <div class = "card-wrapper">
            <div class = "card-img"><img src = "assets/images/brunello-di-montalcino-poggio-alle-mura-2009docg-239x555.jpg" alt = "" title = "">
            </div>
            <div class = "card-box align-left">
              <p class = "mbr-text mbr-fonts-style display-4 pb-2">Red Wines Banfi</p>
              <h4 class = "card-title mbr-fonts-style display-7"><br><br>
                <a href = "#" data-toggle = "modal" data-target = "#mbr-popup-7g" class = "text-danger"></a><a href = "#" data-toggle = "modal" data-target = "#mbr-popup-8l" class = "text-danger">Brunello di Montalcino Poggio alle Mura 2009DOCG</a>
              </h4>
            </div>
          </div>
        </div>
  </section>
  </div>

Я сделал вам отрывок. Добавьте соответствующие HTML и CSS, чтобы получить минимальный воспроизводимый пример

mplungjan 31.03.2021 10:32

Зачем использовать фильтр и ничего не возвращать? Похоже, вам нужен .each или что-то вернуть, а затем выполнить каждый

mplungjan 31.03.2021 10:32
код, который возвращает только текстовые значения - Я думаю, у нас другое представление о том, что означает «возвращает текстовые значения» - похоже, вы выполняете текстовый поиск или текстовый фильтр.
freedomn-m 31.03.2021 11:39

Измените $(this).text() на $(this).html() - не совсем уверены, что вы хотите, но это решит описанную проблему - например, вы сможете ввести «img», чтобы отфильтровать результаты по результатам с тегами <img>.

freedomn-m 31.03.2021 11:39

@ freedomn-m спасибо, .html, кажется, работает лучше, чем .text

Bill Georgiadis 31.03.2021 12:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
57
0

Другие вопросы по теме