想要針對某些子元素內容來做過濾篩選嗎？那麼可以先來試試 jQuery.liveFilter。它可以設定篩選的項目及用來篩選的來源元素。
套件名稱：jQuery.liveFilter
套件網址：N/A
作者網站：http://cheeaun.github.com/jquery.livefilter/
套件網址：N/A
發佈日期：2009-07-05
檔案大小：1.06 KB
檔案下載：jquery.liveFilter.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | filterChildSelector(選填) 描述： 內容要被篩選的元素(在要被篩選的元素中的子元素) 預設值： null before(選填) 描述： 篩選前要執行的動作 預設值： function(){} after(選填) 描述： 篩選後要執行的動作 預設值： function(){} inputEl(選填) 描述： 用來取得篩選內容的元素 預設值： 無 after(選填) 描述： 要被篩選的元素 預設值： function(){} |
方法說明：
檢視原始碼 JavaScript
1 2 | // 利用指定元素的內容來篩選顯示指定元素中的項目 $(selector).liveFilter(inputEl, filterEl, options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.liveFilter.js"></script> <script type="text/javascript"> $(function(){ // 讓 #livefilter-list 的項目能依 #livefilter-input 輸入的值來過濾 // 過濾時是篩選 li 中的 a 的值 $('#livefilter-list').liveFilter('#livefilter-input', 'li', { filterChildSelector: 'a' }); }); </script> <body> <label for="livefilter-input">請輸入:<input id="livefilter-input" type="text" value=""></label> <ul id="livefilter-list"> <li><a href="#">jQuery</a></li> <li><a href="#">Android</a></li> <li><a href="#">Google</a></li> <li><a href="#">abgne.tw</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Java</a></li> <li><a href="#">Google+</a></li> <li><a href="#">EditPlus</a></li> </ul> </body> |