Question

我正在使用实时搜索功能，但是我需要隐藏所有不匹配的容器。

如果没有在搜索栏中输入任何内容，这是如何填充容器的示例。 编辑：即使搜索栏中有字符串，这也将是相同的。 fadeOut()隐藏元素，不将其删除。

<div id="Alabama_container" class="state-container">
   <h1>Alabama</h1>
   <div id="330_store-object" class="store-object" style="">
      <h4>Store 330 - Birmingham</h4>
      <p>(205) 981-1320</p>
      <p>5201 US-280, Birmingham, AL 35242, USA</p>
      <button id="330_store-object-link" class="button">View on Map</button><button id="330_store-object-floorPlan" class="button">Floorplans</button>
   </div>
   <div id="337_store-object" class="store-object" style="">
      <h4>Store 337 - Dothan</h4>
      <p>(334) 671-1370</p>
      <p>4401 Montgomery Hwy #300, Dothan, AL 36303, USA</p>
      <button id="337_store-object-link" class="button">View on Map</button><button id="337_store-object-floorPlan" class="button">Floorplans</button>
   </div>
</div>

首先在DOM上生成state-container元素，然后将store-object元素附加到适当命名的state-container上。

搜索功能示例：

$(document).ready(function () {
    $("#store-search").keyup(function () {
        var filter = $(this).val(),
            count = 0;
        $(".store-object").each(function () {

            // If the store object doesn't match, remove it
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

                // Show the store objects that do match the query
            } else {
                $(this).show();
                count++;
            }
        });

        // Results counter for troubleshooting
        var numberItems = count;
        $("#filter-count").text(count + "Results Founds");
    });
});

我的搜索功能仅使用过滤器来确定store-object元素内的所有匹配字符串，并隐藏所有不匹配的字符串。但是，匹配项仍驻留在其state-container中，因此最终得到的是状态列表，内部没有任何结果。

我想做的是遍历state-container元素并确定它是否包含任何store-object子元素，以便我可以适当地处理它。我将用什么来实现这一目标？

Answer 1

有几种不同的方法可以实现您想要的。其中一种方法是使用:visible选择器，然后将状态容器隐藏在空集上。

$('.state-container').each(function(){
    if($(this).find('.store-object:visible').length === 0){
       $(this).hide();
    }
});

请记住，您需要在所有孩子的fadOut动画完成后运行。

另一种方法是在搜索过程中保持隐藏元素的计数，如果所有子元素都被隐藏，则删除父元素。

$(document).ready(function () {
    $('.state-container').each(function(){
        $(this).data('total', $(this).find('.store-object').length);//set a count of total
        
    });
    $("#store-search").keyup(function () {
        var filter = $(this).val(),
            count = 0;
        //reset the hidden count for the states
        $('.state-container').each(function(){
            $(this).data('hidden', 0);//initialize to 0
            $(this).show();
        });
        
        $(".store-object").each(function () {
            var parent = $(this).parent();
            
            // If the store object doesn't match, remove it
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
                parent.data('hidden', parent.data('hidden') + 1);//increment hidden count
                // Show the store objects that do match the query
            } else {
                $(this).show();
                count++;
            }
            
            if(parent.data('hidden') == parent.data('total')){
              parent.hide();
            }
        });

        // Results counter for troubleshooting
        var numberItems = count;
        $("#filter-count").text(count + "Results Founds");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='store-search' />
<div id="Alabama_container" class="state-container">
   <h1>Alabama</h1>
   <div id="330_store-object" class="store-object" style="">
      <h4>Store 330 - Birmingham</h4>
      <p>(205) 981-1320</p>
      <p>5201 US-280, Birmingham, AL 35242, USA</p>
      <button id="330_store-object-link" class="button">View on Map</button><button id="330_store-object-floorPlan" class="button">Floorplans</button>
   </div>
   <div id="337_store-object" class="store-object" style="">
      <h4>Store 337 - Dothan</h4>
      <p>(334) 671-1370</p>
      <p>4401 Montgomery Hwy #300, Dothan, AL 36303, USA</p>
      <button id="337_store-object-link" class="button">View on Map</button><button id="337_store-object-floorPlan" class="button">Floorplans</button>
   </div>
</div>

Answer 2

您可以检查store-container是否具有store-object，然后像这样循环遍历它们：

$(".store-container").find(".store-object").length &&
$(".store-object").each(function () {

编辑后，我可以说您应该检查可见长度，例如：

$(".state-container").find(".store-object:visible").length &&

但是，我仍然要说的是，您不需要检查任何东西，因为您已经在检查条件，即如果可见则只能淡出。也就是说，即使隐藏了该属性，使用fadeOut也没有问题。但是我可以说的是，您可以暂停搜索执行：

setTimeout(()=>{
// your each function
}, 600);

如果容器中有某类的孩子

2 个答案: