Cách chỉ lấy các phần tử con trực tiếp bằng hàm jQuery

Tôi có cấu trúc bảng như sau:

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

Trong javascript, tôi có một biến tblcó giá trị là $(table1), và sau đó tôi muốn nhận tất cả các phần tử con trực tiếp (tr) <tbody>của table1. Mã của tôi là:

$('tr', tb1)

Rõ ràng nó trả về tất cả các <tr>phần tử trong table1 và table2. Tôi nghĩ tôi có thể vượt qua

$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})

hoặc loại logic này.

Tôi biết $('table1 > tbody > tr')có thể nhận được con trực tiếp tr. Thật không may, tôi không thể sử dụng cái này.

Bất cứ ai có ý tưởng tốt về điều này?

Cảm ơn.

Bạn có thể sử dụng find():

tbl.find("> tbody > tr")

Như @ jave.web đã đề cập trong các nhận xét

Để tìm kiếm thông qua con trực tiếp của một phần tử sử dụng .children(). Nó sẽ chỉ tìm kiếm qua những đứa trẻ trực tiếp và không đi sâu hơn nữa. http://api.jquery.com/children/

Đây chính xác là lý do tại sao người ta nên cẩn thận với các bảng lồng nhau. Tôi thực sự hy vọng rằng bạn sử dụng chúng cho dữ liệu chứ không phải bố cục trang.

Một vấn đề khác có thể sẽ làm hỏng ngày của bạn là sử dụng bộ chọn CSS trên các bảng lồng nhau ... về cơ bản bạn cũng gặp phải vấn đề tương tự - bạn không thể chọn phần tử TR của bảng bên ngoài mà không chọn các phần tử bên trong bảng bên trong. (Bạn không thể sử dụng bộ chọn con vì nó không được triển khai trong IE6)

Điều này sẽ hoạt động:

$("#table1 > tbody > tr")

Tuy nhiên, tôi khuyên bạn nên mã hóa cứng phần tử TBODY, vì bạn không nên dựa vào trình duyệt để tạo nó cho bạn.

http://api.jquery.com/child-selector/

$('tb1 > tr')

Nếu bạn có id của cả hai phần tử và bạn muốn tìm cách sử dụng phần tử trực tiếp bên dưới mã

$("#parent > #two")

Nếu bạn muốn tìm kiếm lồng nhau, bạn có thể sử dụng find. Nó được giải thích chi tiết ở đây. https://handyopinion.com/jquery-selector-find-nested-child-elements/