javascript - 从索引中查找表中具有属性的 tr

Question

我想找到我的表中具有某些属性的所有 tr，从另一个 tr 开始，我找不到如何:

$(document).on('click', '#myTable tr', function(e) {
  var index = $(this).index();
  alert(index);
  //find tr with td label class myIcon
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table id="myTable">
  <tr data-value=1><td><label class="myIcon3"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon3"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
</table>

我想从点击的 tr 开始获取带有 td 标签类 myIcon 的 tr？

我该怎么做？

Answer 1

您可以将 nextAll() 与 :has() 一起使用来检查 td 是否具有 label myIcon 类存在于该行中。

$(document).on('click', '#myTable tr', function() {
  // First remove background from all siblings but you don't need this
  $(this).siblings().andSelf().css('background', 'none');
  
  // Selector
  $(this).nextAll('tr:has(td > label.myIcon)').css('background', 'red')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable"> 
<tr data-value=1> <td> <label class ="myIcon3"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
<tr data-value=1> <td> <label class ="myIcon"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
<tr data-value=1> <td> <label class ="myIcon"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr><tr data-value=1> <td> <label class ="myIcon3"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
</table>