jQuery trovare precedente riga della tabella che ha una cella con una specifica classe

Question

Supponiamo che ho una tabella in questo modo:

<table> 
    <tr><td class="this-is-a-label">Label Cell</td></tr> 
    <tr><td>Detail 1</td></tr> 
    <tr><td class="selected">Detail 2</td></tr> 
</table> 

voglio essere in grado di afferrare il precedente "Cell Etichetta" dalla cella "Selected" .

Il mio script jQuery dovrebbe essere qualcosa di simile:

$('.selected').each(function() { 
    var label = $(this).parent().prev('tr td.this-is-a-label'); 
    //... do what I need with the label ... 
}); 

Ma non funziona.

Qualcuno ha qualche suggerimento?

Answer 1

È possibile farlo:

$('.selected').each(function() { 
    var label = $(this).closest('tr').prevAll('tr:has(td.this-is-a-label):first') 
        .children('td.this-is-a-label'); 
    //... do what I need with the label ... 
}); 

Questo non è l'ideale, però, è piuttosto costoso attraversamento DOM, se si può garantire che sia sempre 2 file dietro, si può fare questo:

$(this).closest('tr').prev().prev().children('td.this-is-a-label') 

... che è molto più veloce, dipende solo dalle ipotesi e dalle garanzie che puoi dare sul tuo markup, se ci sono certezze, puoi sicuramente renderlo più veloce.

Answer 2

ne dite:

var label = 
    $('.selected').parent().prevAll('tr').children('td.this-is-a-label')[0]; 

Answer 3

Ecco come si ottiene i riferimenti ad entrambe le <tr> e <td> elementi DOM:

$("tr:has(td.selected)").each(function(i, trSel){ 
    var trLabel = $(trSel).prevAll("tr:has(td.this-is-a-label)").get(0); 

    var tdSel = $(trSel).children("td.selected").get(0); 
    var tdLabel = $(trLabel).children("td.this-is-a-label").get(0); 

    console.log(trSel, tdSel); 
    console.log(trLabel, tdLabel); 
}); 

Answer 4

ho creato un piccolo plug-in risposta a questo post al fine di trovare una cella che è relativa alla cella corrente:

$.fn.cellFromCell = function(r,c,upOrDown) { 
    if(upOrDown == 'down') { 
     return $(this).parent().prevAll(':eq(' + r + ')').find('td:eq(' + c + ')').text(); 
    } else { 
     return $(this).parent().nextAll(':eq(' + r + ')').find('td:eq(' + c + ')').text(); 
    } 
} 

alert($('.selected').cellFromCell(1, 0, 'down')); // alerts "Label Cell" 
alert($('.this-is-a-label').cellFromCell(0, 0)); // alerts "Detail 1" 
​ 

Ti ho usato r html per un semplice caso di test. Si può pasticciare con essa qui: http://jsfiddle.net/6kfVL/3/

Answer 5

$("td.selected").parents("table").find("td.this-is-a-label").text(); 

Answer 6

si può rendere facile codificando in un tag id HTML5 quando si genera la tabella:

<table id="myTable"> 
    <tr id="label1"><td class="this-is-a-label">Label Cell</td></tr> 
    <tr data-parent-label-id="label1"><td>Detail 1</td></tr> 
    <tr data-parent-label-id="label1"><td class="selected">Detail 2</td> </tr> 
</table> 

è possibile utilizzare il valore, e anche eseguire azioni sul "genitore" associato:

$("#myTable").on("click", "tr", function() { 
    var associatedLabelId = $(this).data("parent-label-id"); 
    alert("Parent label of the row clicked: " + associatedLabelId); 
    $("#" + associatedLabelId).addClass("highlight"); 
}