javascript - 用jquery过滤器显示整个div？

Question

我有这个代码，它只从#myDIV 返回文本值。该 div 有一个部分，其中包含多个带有图像、文本和图像标题的 div（产品列表）。我的过滤器适用于标题和文本（这就是我想要的），但它只返回文本值。标题作为空结果返回，并且根本不显示图像。我想返回所有 3 个（文本/标题/图像）。

PS 部分包含多个“容器 px-3”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>

标签： javascripthtmljqueryfunction