jqueryでいくつかのdivをフィルタリングする

Question

本当にやりたかったのは、その中のh1でdivをフィルタリングすることです。 ここにいくつかの製品と入力フィールドがあります。 ユーザーの値とdiv のh1との間でjqueryを比較する必要があります。h1に入力フィールド の値が含まれていない場合、divは「削除」クラスを持ち、idは「mYY」は「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(); 
    } 
});