2

如果以下所有行都包含特定类，我如何隐藏子标题行。当下一个子标题出现时，以下行将停止。如何为下一个子标题执行此操作？

示例：隐藏 SUBHEADER 2 行，因为以下所有行都包含“否”。

<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 道歉。
4

2 回答 2

1

这应该这样做

// 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/

于 2013-10-09T23:10:35.237 回答
0

工作演示 http://jsfiddle.net/5kacR/

API: .find: http://api.jquery.com/find/

休息应该有助于你的事业:)

代码 

 $(document).ready(function () {

     $("table tr").each(function () {
          if(!$(this).find('td.no').length)
              $(this).prev('tr').hide();
     });

 });
于 2013-10-09T23:09:27.553 回答