jQuery finden vorherige Tabellenzeile, die eine Zelle mit einer bestimmten Klasse hat

Question

Angenommen, ich habe eine Tabelle wie diese:

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

Ich möchte in der Lage sein, die vorherige "Label Cell" aus der "Selected"-Zelle zu übernehmen.

Mein jQuery-Skript sollte in etwa so aussehen:

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

Aber es funktioniert nicht.

Hat jemand irgendwelche Vorschläge?

Answer 1

Sie können es sich einfach machen, indem Sie beim Erstellen der Tabelle ein HTML5-id-Tag einfügen:

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

Sie können dann den Wert verwenden und sogar Aktionen mit dem zugehörigen "Elternteil" durchführen:

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