Question

我有一个带有与此链接类似的分隔符的过滤列表。我的工作与示例完全相同，除了当内容为空时分隔符不被隐藏，这是我想要实现的。

http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html

keyup事件中的第一个代码块用于过滤列表，但是当我添加第二个块时它会中断。

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered:first li").each(function () {

        if ($(this).text().search(new RegExp(filter, "i")) < 0) {

            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
            count++;
        }

    });

    //code i've added
    $('.li-group').each(function(){
        if($(this).children(':visible').length == 0) {
           $(this).prev().css('display','none');
        }
    }):

});

我的HTML有这样的结构：

<li class="divider">A</li>
<div class="li-group">
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
</div>

<li class="divider">B</li>
<div class="li-group">
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
</div>

我尝试用我的代码做的是，在每个keyup事件中，检查div.li-group的所有子项是否都被隐藏，如果是，则隐藏前一个元素，即列表的分隔符。

注意，我知道我的代码目前是非语义的，但我想在我回去清理代码之前让我的演示工作。

Answer 1

你在评论中给出的link包含jquery代码中的错误：

$("#filter").keyup(function () {
    $('.li-group').each(function(){
        if($(this).children(':visible').length == 0) {
           $(this).prev().css('display','none');
        }
    }):
      ^ should be ; 
});

我纠正错误并且很好

<强> Corrected Code

对于每个div，如果其子项全部隐藏，则隐藏前一个元素？

1 个答案: