jQuery tìm dòng của bảng trước đó có một tế bào với một lớp học cụ thể

Question

Giả sử tôi có một bảng như sau:

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

Tôi muốn để có thể lấy trước "Nhãn di động" từ các tế bào "được chọn" .

kịch bản jQuery My nên một cái gì đó như:

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

Nhưng nó không làm việc.

Có ai có bất kỳ đề xuất nào không?

Answer 1

Bạn có thể làm điều này:

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

Đây không phải là lý tưởng, mặc dù đó là một DOM traversal khá đắt tiền, nếu bạn có thể đảm bảo nó luôn luôn 2 hàng phía sau, bạn có thể làm điều này:

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

... nhanh hơn nhiều, nó chỉ phụ thuộc vào những giả định và đảm bảo bạn có thể thực hiện về đánh dấu của mình, nếu có bất kỳ xác nhận nào, bạn chắc chắn có thể làm cho nó nhanh hơn.

Answer 2

Làm thế nào về:

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

Answer 3

Đây là cách bạn có được tài liệu tham khảo cho cả <tr> và <td> yếu tố 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

Tôi tạo ra một plugin nhỏ để đáp lại bài này với mục đích tìm kiếm một ô có liên quan đến ô hiện tại:

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

Tôi đã sử dụng bạn r html cho một trường hợp thử nghiệm đơn giản. Bạn có thể gây rối với nó ở đây: http://jsfiddle.net/6kfVL/3/

Answer 5

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

Answer 6

Bạn có thể làm cho nó dễ dàng bằng cách mã hóa trong một thẻ id HTML5 khi tạo bảng:

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

Sau đó, bạn có thể sử dụng các giá trị, và thậm chí thực hiện các tác vụ trên "phụ huynh" được liên kết:

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