jQuery tìm phụ huynh cao nhất TD

Question

Tôi đang làm việc trên một mã cho một biểu mẫu có trong một bảng. Tôi đang viết (với jQuery) một hàm để làm nổi bật phần tử <td> của mỗi phần tử <input>. phần đó là đơn giản - mã chỉ là:

$('.myForm input').click(function(){ 
    $(this).parent().addClass('active'); 
    }) 

Phần phức tạp hơn nữa là một số lĩnh vực văn bản được bên trong một bảng thứ hai lồng trong một <td> của bảng đầu tiên. Nó sẽ giống như sau:

<table> 
    <tr> 
     <td> <--cell I want to add the class to 
      <table> 
       <tr> 
        <td><input type='text'></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Vì vậy, câu hỏi của tôi là thế này: có cách nào để sử dụng một tuyên bố jQuery để tìm ra cha mẹ cao nhất <td> của phần tử <input>? Vì vậy, nói cách khác, tôi có thể kết hợp:

$('.myForm input').click(function(){ 
    $(this).parent().addClass('active'); 
    }) 

và

$('.myForm input').click(function(){ 
    $(this).parent().parent().addClass('active'); 
    }) 

thành một chức năng?

Answer 1

Giải pháp tốt nhất là thêm lớp vào bảng bạn thực sự muốn nhắm mục tiêu. Điều này có nghĩa là bạn có thể cập nhật đánh dấu trong tương lai mà không nhất thiết phải phá vỡ JS, bằng cách thực hiện một cái gì đó như $(this).closest('.targetElement').addClass('active').

Nếu bạn không thể làm điều đó, bạn có thể sử dụng parents('td').last(). Thao tác này chọn tất cả các thành phần chính của td và sau đó lấy phần tử cuối cùng.

$('.myForm input').click(function(){ 
    $(this).parents('td').last().addClass('active'); 
}) 

Xem hướng dẫn jQuery:

• closest
• parents
• last

Answer 2

Cố gắng làm điều này:

$('.myForm input').click(function(){ 
    $(this).parents('td').last().addClass('active'); 
}) 

Answer 3

tôi muốn đề nghị cố gắng:

$(this).parents("td").last() 

Nó sẽ tìm thấy tất cả tổ tiên ô trong bảng của phần tử hiện hành. Cái cuối cùng nên chứa phần tử ô bảng cao nhất.

Answer 4

bạn có thể thử:

$(this).parents('td:last'); 

hoặc

$(this).parents('td').last(); 

Answer 5

Đưa yếu tố td cấp cao nhất của bạn một tên lớp:

<table> 
    <tr> 
     <td class="topTD"> <--cell I want to add the class to 
      <table> 
       <tr> 
        <td><input type='text'></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 


$('.myForm input').click(function(){ 
    $(this).closest('td.topTD').addClass('active'); 
}); 

Answer 6

nhanh & bẩn :)

$(this).parents('td')[--$(this).parents('td').length]