0

このリンクに似た仕切りのあるフィルター済みリストがあります。内容が空のときに仕切りが非表示にならないことを除いて、例とまったく同じように動作しています。これは、私が達成しようとしていることです。

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

keyupイベントのコードの最初のブロックはリストをフィルタリングするために機能しますが、2番目のブロックを追加すると壊れます。

$("#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>

私が自分のコードでやろうとしていたのは、各キーアップイベントで、のすべての子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 に答える