找到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>

我想從td標籤類myIcon從點擊tr開始獲取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>

Answer 2

我猜改變腳本塊這樣的事情可能會幫助

<script> 
$(document).on('click', '#myTable tr', function(e) { 
    var index = $(this).index(); 
    var trs = $('#myTable tr'); 
    for(var i=index;i<trs.length;i++){ 
     if(trs[i].getAttribute('data-value')=='1'){ 
      var allTrsWithLabelMyIcon = $(trs[i]).find('td>label.myIcon'); 
      //Variable containing all labels having the class myIcon where data-value for tr is 1 
      console.log(i,allTrsWithLabelMyIcon); 
     } 
    } 
    alert(index); 
}); 
</script> 

Answer 3

雷納德的答案是正確的，但概括你可以用良好的老式香草解決JavaScript來過濾數組。

$(document).on('click', '#myTable tr', function(e) { 
    var $tr = $(this); 

    // Make an array 
    var nextSiblings = $tr.nextAll().toArray(); 

    // Filter the array 
    var filteredSiblings = nextSiblings.filter(

    // Pass a function that returns `true` when you have a matching element 
    function(el, i) { 
     return parseInt(el.getAttribute('data-value'), 10) === 1; 
    } 
) 
});