在其他TR中查找前一个元素，仅按类名查找

时间：2017-03-30 09:16:39

标签： jquery html html-table

我需要点击一个按钮，找到最近的TD，并在后面搜索一个类名。

我会尝试更具体：

我的代码是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
	<tbody>
		<tr>
			<td class="latoTR" rowspan="5">
				LATO A<br><br> Efficency
				<br>
				<div class="modale">70%</div><br><br> Real time efficency<br>
				<div class="modale">98%</div>
			</td>
			<td class="matriceTR" rowspan="3">A</td>
			<td class="rigaTR" rowspan="2">1</td>
			<td>1</td>
			<td>Lorem ipsum</td>
			<td><i class="fa fa-circle ledGreen"></i></td>
			<td>70%</td>
			<td>96%</td>
			<td class="toClick"><i class="fa fa-caret-down"></i></td>
			<td><input type="checkbox" /></td>
		</tr>
		<tr class="toHide">
			<td colspan="7">
				<div class="col-md-6">

				</div>
				<div class="col-md-6">
					<div id="pieChart01" class="pieChartCSS" style="height:250px;"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Lorem ipsum</td>
			<td><i class="fa fa-circle ledYellow"></i></td>
			<td>87%</td>
			<td>77%</td>
			<td class="toClick"><i class="fa fa-caret-down"></i></td>
			<td><input type="checkbox" /></td>
		</tr>
		<tr class="toHide">
			<td colspan="7">
				<div class="col-md-6">

				</div>
				<div class="col-md-6">
					<div id="pieChart02" class="pieChartCSS" style="height:250px;"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>3</td>
			<td>Lorem ipsum</td>
			<td><i class="fa fa-circle ledRed"></i></td>
			<td>93%</td>
			<td>88%</td>
			<td class="toClick"><i class="fa fa-caret-down"></i></td>
			<td><input type="checkbox" /></td>
		</tr>
		<tr class="toHide">
			<td colspan="7">
				<div class="col-md-6">

				</div>
				<div class="col-md-6">
					<div id="pieChart03" class="pieChartCSS" style="height:250px;"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="matriceTR" rowspan="2">B</td>
			<td class="rigaTR" rowspan="2">1</td>
			<td>1</td>
			<td>Lorem ipsum</td>
			<td><i class="fa fa-circle ledGreen"></i></td>
			<td>98%</td>
			<td>83%</td>
			<td class="toClick"><i class="fa fa-caret-down"></i></td>
			<td><input type="checkbox" /></td>
		</tr>
		<tr class="toHide">
			<td colspan="7">
				<div class="col-md-6">

				</div>
				<div class="col-md-6">
					<div id="pieChart04" class="pieChartCSS" style="height:250px;"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Lorem ipsum</td>
			<td><i class="fa fa-circle ledRed"></i></td>
			<td>83%</td>
			<td>98%</td>
			<td class="toClick"><i class="fa fa-caret-down"></i></td>
			<td><input type="checkbox" /></td>
		</tr>
		<tr class="toHide">
			<td colspan="7">
				<div class="col-md-6">

				</div>
				<div class="col-md-6">
					<div id="pieChart05" class="pieChartCSS" style="height:250px;"></div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

点击带有“.toClick”类的“TD”，我需要找到第一个带有“matriceTR”类的previuos元素。

我试过这个：

  

$（'table .toClick'）。click（function（）{
  $（this）.parents（）。find（'。matriceTR：first'）}）

但不是正确的解决方案。 请帮助：）

1 个答案:

答案 0 :(得分：0)

$(".toClick").click(function(){


alert($(this).siblings(".matriceTR").text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="latoTR" rowspan="5">
        LATO A<br><br> Efficency
        <br>
        <div class="modale">70%</div><br><br> Real time efficency<br>
        <div class="modale">98%</div>
      </td>
      <td class="matriceTR" rowspan="3">A</td>
      <td class="rigaTR" rowspan="2">1</td>
      <td>1</td>
      <td>Lorem ipsum</td>
      <td><i class="fa fa-circle ledGreen"></i></td>
      <td>70%</td>
      <td>96%</td>
      <td class="toClick"><i class="fa fa-caret-down">click me</i></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="toHide">
      <td colspan="7">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
          <div id="pieChart01" class="pieChartCSS" style="height:250px;"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lorem ipsum</td>
      <td><i class="fa fa-circle ledYellow"></i></td>
      <td>87%</td>
      <td>77%</td>
      <td class="toClick"><i class="fa fa-caret-down"></i></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="toHide">
      <td colspan="7">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
          <div id="pieChart02" class="pieChartCSS" style="height:250px;"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>3</td>
      <td>Lorem ipsum</td>
      <td><i class="fa fa-circle ledRed"></i></td>
      <td>93%</td>
      <td>88%</td>
      <td class="toClick"><i class="fa fa-caret-down"></i></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="toHide">
      <td colspan="7">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
          <div id="pieChart03" class="pieChartCSS" style="height:250px;"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="matriceTR" rowspan="2">B</td>
      <td class="rigaTR" rowspan="2">1</td>
      <td>1</td>
      <td>Lorem ipsum</td>
      <td><i class="fa fa-circle ledGreen"></i></td>
      <td>98%</td>
      <td>83%</td>
      <td class="toClick"><i class="fa fa-caret-down"></i></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="toHide">
      <td colspan="7">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
          <div id="pieChart04" class="pieChartCSS" style="height:250px;"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lorem ipsum</td>
      <td><i class="fa fa-circle ledRed"></i></td>
      <td>83%</td>
      <td>98%</td>
      <td class="toClick"><i class="fa fa-caret-down"></i></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="toHide">
      <td colspan="7">
        <div class="col-md-6">

        </div>
        <div class="col-md-6">
          <div id="pieChart05" class="pieChartCSS" style="height:250px;"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

使用.siblings()

相关问题
最新问题