如果以下所有行都包含特定的类,如何隐藏子标题行。当另一个子标题是下一个时,以下行停止。如何为下一个子标题执行此操作?
示例:隐藏SUBHEADER 2行,因为以下所有行均包含“ no”。
<table>
<tr class='sub'>
<td colspan='3'>SUBHEADER 1</td>
</tr>
<tr class='row yes'>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class='row no'>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class='sub'>
<td colspan='3'>SUBHEADER 2</td>
</tr>
<tr class='row no'>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class='row no'>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class='sub'>
<td colspan='3'>SUBHEADER 3</td>
</tr>
<tr class='row yes'>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
我测试了两个示例,它们都起作用,但是它们在我的环境中不起作用。然后,我意识到自己提供了错误的示例,并为我的错误向Gaby和Tats道歉。
最佳答案
这应该做
// for each subheader row
$('tr.sub').each(function(){
var self = $(this),
// find all following rows until the next subheader
rows = self.nextUntil('.sub'),
// check if any of those rows contains a .no class
hasNo = rows.find('.no').length > 0;
// hide subheader if no .no class was found
self.toggle(hasNo);
});
http://jsfiddle.net/EA8AB/上的演示
更新(在OP中进行了澄清)
您需要比较后面的行数(如前所述)是否等于后面的
.no
行数。// for each subheader row
$('tr.sub').each(function(){
var self = $(this),
// find all following rows until the next subheader
rows = self.nextUntil('.sub'),
// check if rows number is equal with those of them that have the .no class
allAreNo = rows.filter('.no').length === rows.length;
// show/hide based on whether all are .no or not
self.toggle( !allAreNo );
});
http://jsfiddle.net/EA8AB/2/上的演示