javascript - 使用隐藏元素在 div 上搜索过滤器

Question

我在一个 div 中放置了一个 Accordion ，并且我在 div 中添加了一个搜索框，旨在用作搜索过滤器。在 div 内部，一些 Accordion 元素是可见的，一些是隐藏的。我需要过滤器仅适用于可见元素。

在我使用的当前代码中，它正在搜索 div 内的所有元素，当搜索框被清除时，页面会挂起并且没有响应，除非我刷新页面。

任何指向正确方向的解决方案将不胜感激。

$(document).ready(function() {
  $("#searchTC").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#testcases div").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="panel">
    <div class="panel-heading">
      <h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>

      <div class="panel-actions">
        <!--Search TestCases-->
        <div id="filterTC" class="form-group">
          <div class="input-search">
            <i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
            <input type="search" class="form-control" placeholder="Search..." id="searchTC">
          </div>
        </div>
        <!--Select All/Deselect All Toggle-->
        <div class="toggle-wrap w-checkbox float-right">
          <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
          <label class="toggle-label w-form-label" for="Toggle-Switch"></label>
          <div class="toggle">
            <div class="toggle-active">
              <div class="active-overlay"></div>
              <div class="top-line"></div>
              <div class="bottom-line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-body container-fluid">
      <div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
        <div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label>            tc_SearchProducts</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_Ebay</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_Ebay"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item active"></div>
        <div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
            <label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item"></div>
        <div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label>            tc_ExploreAmazon</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_Amazon</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_Amazon"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item"></div>
      </div>
      <br>
      <button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
    </div>
  </div>
</div>

Answer 1

使用jquery hidden属性判断元素是否被隐藏

if ($('#testElement').is(':visible')) {
  // Code
}