0

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

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都被隐藏，如果是，那么隐藏前一个元素，即列表的分隔符。

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

4

1 回答 1

1

您在评论中给出的链接在 jquery 代码中包含错误：

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

我纠正了错误，它很好

更正的代码

于 2012-05-08T14:31:44.513 回答