<div id="newNews" class="commonfrm"><h4>最新消息</h4><table><tr id="t_head"><th class="th_category">類別</th><th>標題</th><th class="th_time">發布時間</th></tr><tr><td ><a href="#" class="td_category">[政治]</a></td><td><a href="#">閨蜜干政</a></td><td class="td_time">12-21 15:55</td></tr><tr><td ><a href="#" class="td_category">[娛樂]</a></td><td><a href="#">皇家賭場</a></td><td class="td_time">12-21 15:55</td></tr><tr><td ><a href="#" class="td_category">[時尚]</a></td><td><a href="#">帥氣衣服</a></td><td class="td_time">12-21 15:55</td></tr><tr><td><a href="#" class="td_category">[政治]</a></td><td><a href="#">訪俄羅斯</a></td><td class="td_time">12-21 15:55</td></tr><tr><td><a href="#" class="td_category">[體育]</a></td><td><a href="#">足球</a></td><td class="td_time">12-21 15:55</td></tr><tr><td><a href="#" class="td_category">[體育]</a></td><td><a href="#">羽毛球奪冠</a></td><td class="td_time">12-21 15:55</td></tr></table></div><script>$("#ibtnSearch").click(function () {var content = $("#t_head").siblings();var key=$("#txtKey").val();if ($("#radcategory")[0].checked){content.hide().children(':first-child:contains("'+key+'")').parent().show()}elsecontent.hide().children(':nth-child(2):contains("'+key+'")').parent().show();})</script>

初始頁面如圖所示

結果如圖

第一步先找到所有內容，將所有內容隱藏起來。

然后利用內容過濾選擇器contain將相關消息顯示出來。? ?注：nth-child(2)為父元素的第二個子元素

上述代碼有根據類別篩選和根據標題篩選。當根據標題篩選 '球'? 的時候。找到 tr 中的第二個孩子是否包含 '球'，如果有的話把整個tr顯示出來

總結

以上是生活随笔為你收集整理的JQuery： 实现筛选功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。