0

以下のjscriptコードを使用して、順序付けされていないリストをフィルタリングしています。<h3>検索中に結果のタグを削除しようとしています。バットマンを検索する場合の例私の現在の出力は

Action    
   Batman

Adventure

このカテゴリの「Adventurecoznoresult」という 見出しを削除する必要があります。

    <script type="text/javascript"> 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };  
  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header); 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();    
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();          
        } else {
          $(list).find("li").slideDown();
        }
      })
    .keyup( function () {
        $(this).change();
    });
  } 
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery)); 
  </script>

そして私のhtmlは

<div id="wrap"> 
    <h1 id="header">DVD Collection<form class="filterform" action=""><input class="filterinput" type="text"></form></h1> 
    <h3>Action</h3>
    <ul id="list"> 
        <li><a href="#">Batman</a></li>
        <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
        <li style="display: list-item;"><a href="#">Tremors</a></li> 
    </ul> 
    <h3>Adventure</h3>
    <ul id="list">  
        <li style="display: list-item;"><a href="#">Ice Age</a></li> 
        <li style="display: list-item;"><a href="#">Avathar</a></li> 
    </ul> 

</div>
4

3 に答える 3

1

彼女のコードは変更されました。完璧に動作します。HTMLも変更しました。

HTML：

<div id="wrap"> 
<h1 id="header">DVD Collection</h1> 
<ul id="list">   
  <li>
<h3>Action</h3>
<ul>
    <li><a href="#">Batman</a></li>
    <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
    <li style="display: list-item;"><a href="#">Tremors</a></li> 
  <li style="display: list-item;"><a href="#">Amnts</a></li> 
  </ul>
  </li>
  <li>
<h3>Adventure</h3>
<ul>
    <li style="display: list-item;"><a href="#">Ice Age</a></li> 
    <li style="display: list-item;"><a href="#">Avathar</a></li> 
</ul> 
  </li>
  </ul>
</div>

Javascript：

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };  
  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header); 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(function(){$(list).find("ul").each(function(){
            console.log($(this).children("li:visible").length); if($(this).children("li:visible").length===0)$(this).parent().slideUp();
          });});    
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();  

        } else {
          $(list).find("ul, li").slideDown();
        }
      })
    .keyup( function () {
        $(this).change();
    });
  } 
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

こちらがデモ ですhttp://jsbin.com/welcome/71807/

更新されたコード

liリストに追加

<li class="noresult">No Result Found</li>

CSS：

.noresult {
  display: none;
}

JS：slideUpのもう1つの連鎖機能

function(){
              if($(list).find("ul:visible").length === 0)
                $(".noresult").show();
              else
                $(".noresult").hide();
            });

デモと完全なコードはこちら http://jsbin.com/welcome/71862/

于 2013-01-09T05:58:40.180 に答える
0

スクリプトに何かを追加しました。以下はスクリプト全体です。

<script>
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
  return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

function listFilter(header, list) {
   var form = $("<form>").attr({"class":"filterform","action":"#"}),
   input = $("<input>").attr({"class":"filterinput","type":"text"});
   $(form).append(input).appendTo(header);

   $(input).change( function () {
    var filter = $(this).val();
    if(filter) {
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(function(){
          jQuery.each($(list).find('ul'),function(){
              if(!$(this).find('li:visible').length){
                 $(this).parent().slideUp();
              }
           });
      });
      $(list).find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
    return false;
  })
.keyup( function () {
    $(this).change();
  });
  }

$(function () {
    listFilter($("#header"), $("#list"));
});
}(jQuery));

于 2013-01-09T05:36:52.493 に答える
0

<ul>以下のように、コレクションをに入れてみてください。

<div id="wrap"> 
<h1 id="header">DVD Collection<form class="filterform" action=""><input class="filterinput" type="text"></form></h1> 
<ul id="dvd-collections">
    <li>
        <h3>Action</h3>
        <ul id="list"> 
            <li><a href="#">Batman</a></li>
            <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
            <li style="display: list-item;"><a href="#">Tremors</a></li> 
        </ul>
    </li> 
    <li>
        <h3>Adventure</h3>
        <ul id="list">  
            <li style="display: list-item;"><a href="#">Ice Age</a></li> 
            <li style="display: list-item;"><a href="#">Avathar</a></li> 
        </ul> 
    </li>
</ul>

また、スクリプトで、に結果がない場合はul[id=list]、slideUpそのparent li。

それが役に立てば幸い。

于 2013-01-09T05:01:54.087 に答える