Nhận con thứ hai bằng jQuery

$(t).html()

trả lại

<td>test1</td><td>test2</td>

Tôi muốn lấy thứ hai tdtừ $(t)đối tượng. Tôi đã tìm kiếm một giải pháp nhưng không có gì làm việc cho tôi. Bất kỳ ý tưởng làm thế nào để có được yếu tố thứ hai?

lấy đứa con thứ hai:

$(t).children().eq(1);

hoặc, lấy đứa con thứ hai <td>:

$(t).children('td').eq(1);

Đây là một giải pháp có thể rõ ràng hơn để đọc trong mã:

Để có được đứa con thứ 2 trong danh sách không có thứ tự:

   $('ul:first-child').next()

Và một ví dụ chi tiết hơn: Mã này lấy văn bản thuộc tính 'title' của phần tử con thứ 2 của UL được xác định là 'my_list':

   $('ul#my_list:first-child').next().attr("title")

Trong ví dụ thứ hai này, bạn có thể thoát khỏi 'ul' khi bắt đầu bộ chọn, vì nó là dự phòng, vì ID phải là duy nhất cho một trang. Đó chỉ là để thêm sự rõ ràng cho ví dụ.

Lưu ý về Hiệu suất và Bộ nhớ , hai ví dụ này là những biểu hiện tốt, vì chúng không khiến jquery lưu một danh sách các phần tử ul phải được lọc sau đó.

Cái này thế nào

$(t).first().next()

CẬP NHẬT CHÍNH:

Ngoài việc câu trả lời trông đẹp như thế nào, bạn cũng phải suy nghĩ về hiệu suất của mã. Do đó, cũng cần phải biết chính xác những gì trong $(t)biến. Đây có phải là một mảng của <TD>hoặc nó là một <TR>nút với một số <TD>sbên trong nó? Để minh họa rõ hơn về điểm này, hãy xem điểm số jsPerf trong <ul>danh sách có 50 <li>trẻ em:

http://jsperf.com/second-child-selector

Các $(t).first().next()phương pháp là nhanh nhất ở đây, bởi đến nay.

Tuy nhiên, mặt khác, nếu bạn lấy <tr>nút và tìm <td>con và chạy thử nghiệm tương tự, kết quả sẽ không giống nhau.

Hy vọng nó giúp. :)

Tôi không thấy nó được đề cập ở đây, nhưng bạn cũng có thể sử dụng các bộ chọn thông số CSS. Xem tài liệu

$('#parentContainer td:nth-child(2)')

Thử cái này:

$("td:eq(1)", $(t))

hoặc là

$("td", $(t)).eq(1)

Ngoài việc sử dụng các phương thức jQuery, bạn có thể sử dụng cellsbộ sưu tập gốc mà nó <tr>cung cấp cho bạn.

$(t)[0].cells[1].innerHTML

Giả sử tlà một phần tử DOM, bạn có thể bỏ qua việc tạo đối tượng jQuery.

t.cells[1].innerHTML

_{Thật đáng ngạc nhiên khi thấy rằng không ai đề cập đến cách JS bản địa để làm điều này ..}

Không có jQuery:

Chỉ cần truy cập vào childrentài sản của phần tử cha. Nó sẽ trả về một HTMLCollection trực tiếp của các phần tử con có thể được truy cập bởi một chỉ mục. Nếu bạn muốn có con thứ hai:

parentElement.children[1];

Trong trường hợp của bạn, một cái gì đó như thế này có thể hoạt động: (ví dụ)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

Bạn cũng có thể sử dụng kết hợp các bộ chọn CSS3 / querySelector()và sử dụng :nth-of-type(). Phương pháp này có thể hoạt động tốt hơn trong một số trường hợp, bởi vì bạn cũng có thể chỉ định loại phần tử, trong trường hợp này td:nth-of-type(2) (ví dụ)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

Sử dụng .find()phương pháp

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

Bạn có thể sử dụng hai phương thức trong jQuery như được đưa ra dưới đây-

Sử dụng jQuery: nth-child Selector Bạn đã đặt vị trí của một phần tử làm đối số của nó là 2 như bạn muốn chọn phần tử li thứ hai.

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

Sử dụng jQuery: eq () Selector

Nếu bạn muốn có được phần tử chính xác, bạn phải chỉ định giá trị chỉ mục của mục. Một phần tử danh sách bắt đầu bằng một chỉ mục 0. Để chọn phần tử thứ 2 của li, bạn phải sử dụng 2 làm đối số.

$( "ul li:eq(1)" ).click(function(){
  //do something
});

Xem ví dụ: Nhận phần tử danh sách con thứ hai trong jQuery