Jquery filter and show

Question

HTML select要素で選択されたオプションで特定のdata- *値を持つ要素をマイページでフィルタリングしようとしています。ボタンをクリックすると、クラスbusiness-rowのすべての要素が非表示になり、フィルタリング後に何も表示されません。

HTMLはdata-business-id属性が異なるこのような要素のリストが含まれています

<div data-business-id="2398" class="business-row"> 
    <div class="col-xs-12"> 
       <div class="col-xs-12 index-panel" id="pagewrap"> 
            <div id="content" class="col-xs-2 app-status app-inprogress"> 
       <span class="app-status-icon"></span> 
        <div class="app-status-text"> 

                  <span>Saved</span> 
                </div> 
       </div> 

      <div id="middle" class="col-xs-7 index-panel-desc"> 
       <div class="index-category"> 
        <p></p>     
        <h3> Name: TEsts</h3> 
       </div> 
             <p class="index-lead-title"><h5><strong>Application Type: New Hire</strong></h5></p> 

       <p><strong>Entity Type: Individual </strong> <br> 
              </p> 

       <ul> 
        <li>Date Submitted: Not Submitted</li> 
        <li>Approved Date: </li> 
       </ul> 

       <!-- <p><a href="#">See More Details</a></p> --> 
      </div> 

      <div id="sidebar" class="col-xs-3 details-pane"> 
        <ul> 
         <li> <a> VIEW APPLICATION: </a> </li> 
         <li> 

         </li> 
         <li> <a> VIEW CONFIRMATION PAGE: </a> </li> 


        </ul> 
      </div> 
     </div> 
    </div> 
</div> 

マイJS/jQueryのは単純です：

$("#filter-submit-btn").click(function() { 

    var busID = $("#filter-business").val(); 

     $('.business-row').hide().filter('.business-row [data-business-id="'+busID+'"]').show(); 

    } 

Answer 1

$('.business-row').hide().filter('.business-row [data-business-id="'+busID+'"]').show(); 

このロジックは、すべてのビジネスを見つけるために言いますそれらを非表示にし、表示する何かのデータビジネスIDを持つ子を持つビジネス行クラスを持つものだけを見つけることができます。ただし、マークアップでは、data-business-idが行であり、子ではありません。代わりに以下を試してみてください。

$('.business-row').hide().filter('[data-business-id="'+busID+'"]').show();