Question

我试图通过HTML select元素中选择的选项过滤页面上具有特定数据*值的元素。在按钮上单击它会隐藏所有具有类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();

这个逻辑说找到所有业务行元素，隐藏它们，然后只找到那些具有business-row类的子元素，这个子元素的data-business-id是要显示的东西。但是，您的标记显示data-business-id在行本身而不是子行。请尝试以下方法。

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

Jquery过滤器和显示

1 个答案: