JQuery найти предыдущую строку таблицы, которая имеет ячейку с определенным классом

Предположим, что у меня есть таблица:

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

Я хочу иметь возможность захватить предыдущую ячейку ярлыка из ячейки "Выбранные".

Мой jQuery script должен выглядеть примерно так:

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

Но он не работает.

Есть ли у кого-нибудь предложения?

Ответ 1

Вы можете сделать это:

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

Это не идеально, хотя это довольно дорогое обход DOM, если вы можете гарантировать его всегда на 2 строки позади, вы можете сделать это:

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

..., который намного быстрее, это просто зависит от того, какие предположения и гарантии вы можете сделать о своей разметке, если есть какие-то определенные факторы, вы можете сделать это быстрее.

Ответ 2

Как насчет:

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

Ответ 3

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

Ответ 4

Вот как вы получаете ссылки на элементы <tr> и <td> 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);
});

Ответ 5

Я создал небольшой плагин в ответ на этот пост с целью поиска ячейки, которая относится к текущей ячейке:

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

Я использовал ваш html для простого тестового примера. Вы можете использовать это здесь: http://jsfiddle.net/6kfVL/3/

Ответ 6

Вы можете упростить кодирование в теге id HTML5 при создании таблицы:

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

Затем вы можете использовать это значение и даже выполнять действия над связанным "родителем":

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