javascript - 通过jquery过滤一些div

Question

我真正想做的是通过其中的 h1 过滤一些 div这里将是一些产品和一个输入字段。我需要 jquery 比较来自用户的值和 div 的 h1那么如果 h1 不包含输入字段的值具有“remove”类和 id“mYY”的 div 应该是“display:none”

下面是我的代码:-

    <input type="text" id="search" placeholder="Search For Components" />

      <div class="container">
          <div class="row">
             <div id="mYY" class="remove col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <form>
                    <div class="card">
                      <div class="back">
                          <div class="des">
                              <h4>DESCRIPTION :</h4>
                              <p>some info of the product</p>
                          </div>
                      </div>
                      <h1>some product</h1>
                      <p class="price">125.00</p>
                  </div>
                </form>
              </div>
           </div>

这是下面的js代码:-

<script>
function myFunction() {
    var input, filter, div, name, i;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    div = document.getElementById("mYY");
    name = div.getElementsByTagName("h1");
    for (i = 0; i < name.length; i++) {
         name[i].getElementsByTagName("h1")[0];
        if (name.innerHTML.toUpperCase().indexOf(filter) > -1) {
            div[i].style.display = "";
        } else {
            div[i].style.display = "none";

        }
    }
}
</script>

Answer 1

试试这个 jQuery 代码:

在更改 #search 字段时，它会检查是否有任何 H1 不包含该文本并隐藏它们的 .remove 元素。

$('#search').change(function(){
    var searchVal = $(this).val();
    // Hide the fields that do not contain the seached value
    var $foundH1 = $("H1:not(:contains("+searchVal+"))");
    if ($foundH1.length) {
        $foundH1.closest('.remove').hide();
    }
    // Show the fields that do contain the seached value
    var $otherH1 = $("H1:contains("+searchVal+")");
    if ($otherH1.length) {
        $otherH1.closest('.remove').show();
    }
});