<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()
}
else
content.hide().children(':nth-child(2):contains("'+key+'")').parent().show();
})
</script>
初始页面如图所示
结果如图
第一步先找到所有内容,将所有内容隐藏起来。
然后利用内容过滤选择器contain将相关消息显示出来。 注:nth-child(2)为父元素的第二个子元素
上述代码有根据类别筛选和根据标题筛选。当根据标题筛选 '球' 的时候。找到 tr 中的第二个孩子是否包含 '球',如果有的话把整个tr显示出来