jQuery encontrar anterior fila de la tabla que tiene una celda con una clase específica

Question

Supongamos que tengo una tabla de este 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> 

Quiero ser capaz de agarrar el anterior "Cell etiqueta" de la célula "Seleccionado" .

Mi script jQuery debe ser algo como:

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

Pero no está funcionando.

¿Alguien tiene alguna sugerencia?

Answer 1

Usted puede hacer esto:

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

Esto no es lo ideal, sin embargo, es un poco caro recorrido DOM, si se puede garantizar que siempre es 2 filas más atrás, se puede hacer esto:

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

... que es mucho más rápido, solo depende de las suposiciones y garantías que pueda hacer sobre su marcado, si hay alguna certeza, definitivamente puede hacerlo más rápido.

Answer 2

¿Qué tal:

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

Answer 3

continuación se explica cómo obtener referencias tanto a los <tr> y <td> elementos 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

he creado un plugin poco en respuesta a esta entrada con el fin de encontrar una celda que es relativa a la celda actual:

$.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" 
​ 

Te he usado r html para un caso de prueba simple. Usted puede meterse con ella aquí: http://jsfiddle.net/6kfVL/3/

Answer 5

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

Answer 6

Usted puede hacer más fácil mediante la codificación de una etiqueta de identificación HTML5 cuando se genera la tabla:

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

A continuación, puede utilizar el valor, e incluso realizar acciones en el "padre" asociado:

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