使用jquery从触发元素中查找最接近的行

时间：2016-10-28 06:11:21

标签： jquery html

我需要您toggle最接近row triggered元素的帮助。请通过小提琴。

我想要的是点击相对标题名称next closest tr，并切换类名.expandKpi。

我尝试使用下面的脚本，这个脚本在另一个条件下先前工作过。

$(".annualViewtbody tr .title").click(function(){
    $(this).closest('tr').toggleClass('row_active');
    $(this).closest('tr').next('tr.expandKpi').toggle();
});

以前，父tr和tr tr之间没有expandKpi。

＆＃13;
＆＃13; 
.expandKpi {
    display: none;
}
＆＃13; 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered annualView" style="background:#fff">
      <thead>
        <tr>
          <th>Title Name</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">JAN</th>
          <th class="text-center">FEB</th>
          <th class="text-center">MAR</th>
          <th class="text-center">APR</th>
          <th class="text-center">May</th>
          <th class="text-center">JUN</th>
          <th class="text-center">JUL</th>
          <th class="text-center">AUG</th>
          <th class="text-center">SEP</th>
          <th class="text-center">Oct</th>
          <th class="text-center">Nov</th>
          <th class="text-center">Dec</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2" class="title">Sample Title</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">3</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
		<tr>
          <td rowspan="2" class="title">Sample Title2</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">20</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title3</td>
          <td rowspan="2" class="text-center">10%<br></td>
          <td rowspan="2" class="text-center">100</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title4 </td>
          <td rowspan="2" class="text-center">10%</td>
          <td rowspan="2" class="text-center">60</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
      </tbody>
    </table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

使用nextAll('tr.expandKpi').first()，你错过了一个空格选择器： annualView tbody ...：

＆＃13;
＆＃13; 
$(".annualView tbody tr .title").click(function(){
    $(this).closest('tr').toggleClass('row_active');
    $(this).closest('tr').nextAll('tr.expandKpi').first().toggle();
});
＆＃13; 
.expandKpi {
    display: none;
}
＆＃13; 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered annualView" style="background:#fff">
      <thead>
        <tr>
          <th>Title Name</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">JAN</th>
          <th class="text-center">FEB</th>
          <th class="text-center">MAR</th>
          <th class="text-center">APR</th>
          <th class="text-center">May</th>
          <th class="text-center">JUN</th>
          <th class="text-center">JUL</th>
          <th class="text-center">AUG</th>
          <th class="text-center">SEP</th>
          <th class="text-center">Oct</th>
          <th class="text-center">Nov</th>
          <th class="text-center">Dec</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2" class="title">Sample Title</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">3</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
		<tr>
          <td rowspan="2" class="title">Sample Title2</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">20</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title3</td>
          <td rowspan="2" class="text-center">10%<br></td>
          <td rowspan="2" class="text-center">100</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title4 </td>
          <td rowspan="2" class="text-center">10%</td>
          <td rowspan="2" class="text-center">60</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
      </tbody>
    </table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我认为这可能符合您的需求：

https://jsfiddle.net/3mto9a33/

简单的解决方案是jQuery的{{1}}不会跳过不需要的元素。 ;）

相关问题
最新问题