jQuery: Nhận ô trong bảng tiếp theo chiều dọc

Question

Làm thế nào tôi có thể sử dụng jQuery để truy cập vào các tế bào (td) ngay lập tức dưới đây một tế bào được đưa ra trong một html lưới bố trí truyền thống table (ví dụ, một trong đó tất cả các tế bào trải dài đúng một hàng và cột)?

Tôi biết rằng sau đây sẽ thiết lập nextCell vào ô bên phải ngay lập tức của tế bào nhấp, vì họ là anh chị em ngay lập tức, nhưng tôi đang cố gắng để lấy các tế bào ngay dưới tế bào nhấp:

$('td').click(function() { 
    var nextCell = $(this).next('td'); 
}); 

Tốt hơn là tôi muốn làm điều đó mà không cần sử dụng các lớp hoặc id.

Answer 1

Hãy thử điều này:

$("td").click(function(){ 
    // cache $(this); 
    var $this = $(this); 

    // First, get the index of the td. 
    var cellIndex = $this.index(); 

    // next, get the cell in the next row that has 
    // the same index. 
    $this.closest('tr').next().children().eq(cellIndex).doSomething(); 
}); 

Answer 2

Có số ô bằng nhau trong mỗi hàng trong bảng không? Nếu vậy, bạn có thể nhận được "đếm" của ô được đề cập, sau đó chọn ô tương ứng trong next('tr').

Answer 3

Làm thế nào về:

$('td').click(function() { 
    var nextCell = $(this).parent().next().find("td:nth-child(whatever)"); 
}); 

Answer 4

$('td').click(function() { 
    var index = $(this).prevAll().length 
    var cellBelow = $(this).parent().next('tr').children('td:nth-child(' + (index + 1) + ')') 
}); 

index là chỉ số 0 dựa trên các tế bào trong hàng hiện tại (prevAll tìm tất cả các tế bào trước khi một người này).

Sau đó, trong hàng tiếp theo, chúng tôi tìm thấy số nth-child td tại chỉ mục + 1 (nth-child bắt đầu từ 1, do đó là + 1).

Answer 5

Nếu bạn muốn làm điều đó mà không sử dụng bộ chọn, bạn có thể làm:

function getNextCellVertically(htmlCell){ 
     //find position of this cell.. 
     var $row = $(htmlCell).parent(); 
     var cellIndex = $.inArray(htmlCell, $row[0].cells); 
     var table = $row.parent()[0]; 
     var rowIndex = $.inArray($row[0], table.rows); 

     //get the next cell vertically.. 
     return (rowIndex < table.rows.length-1) ? 
       table.rows[rowIndex+1].cells[cellIndex] : undefined; 
    } 

    $('td').click(function() { 
     var nextCell = getNextCellVertically(htmlCell); 
     //... 
    }); 

Không hiệu quả đó là quan trọng ở đây nhưng nó hoạt động ra nhanh hơn nhiều để làm điều đó như thế này - trong các thử nghiệm trên 100.000 lặp đó là Nhanh hơn 2-5 lần so với phương pháp tiếp cận dựa trên bộ chọn.