過濾一些div由jquery

Question

我真正想要做的是過濾一些div由h1裏面 這裏將有一些產品和輸入字段。 我需要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(); 
    } 
});