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 dies tun:

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

Dies ist nicht ideal, obwohl, es ist eine ziemlich teure DOM-Traversal, wenn Sie garantieren können, es ist immer 2 Zeilen hinter, Sie können dies tun:

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

...was viel schneller ist, es hängt nur davon ab, welche Annahmen und Garantien Sie über Ihr Markup machen können, wenn es irgendwelche Gewissheiten gibt, können Sie es definitiv schneller machen.

Answer 2

Wie wäre es damit:

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

Answer 3

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

Answer 4

So erhalten Sie Verweise sowohl auf die <tr> y <td> Dom-Elemente:

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

Als Antwort auf diesen Beitrag habe ich ein kleines Plugin erstellt, das eine Zelle findet, die relativ zur aktuellen Zelle ist:

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

Ich habe Ihr html für einen einfachen Testfall verwendet. Sie können es hier ausprobieren: http://jsfiddle.net/6kfVL/3/