tr mit Immobilien in der Tabelle aus dem Index finden

Question

Ich möchte mit einer Eigenschaft alle tr in meinem Tisch finden, die in einem anderen tr starten, kann ich nicht finden, wie man:

$(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>

Ich möchte um die tr mit td label class myIcon ab cl tr zu bekommen?

Wie kann ich das tun?

Answer 1

Sie können nextAll() mit :has() verwenden zu überprüfen, ob td die label mit myIcon Klasse in dieser Zeile existiert hat.

$(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

ich Skriptblock zu so etwas wie dieses erraten ändern könnte helfen

<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

Nenad Antwort ist richtig, aber die Lösung zu verallgemeinern Sie gute altmodische Vanille verwenden JavaScript filtere ein Array.

$(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; 
    } 
) 
});