Отримайте другу дитину за допомогою jQuery

$(t).html()

повертає

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

Я хочу отримати друге tdз $(t)об’єкта. Я шукав рішення, але нічого не працювало для мене. Будь-яка ідея, як отримати другий елемент?

схопити другу дитину:

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

або, схопіть другу дитину <td>:

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

Ось таке рішення, яке, можливо, зрозуміліше читати в коді:

Щоб отримати другу дитину з упорядкованого списку:

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

І більш детальний приклад: Цей код отримує текст атрибута 'title' 2-го дочірнього елемента UL, ідентифікованого як 'my_list':

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

У цьому другому прикладі ви можете позбутися 'ul' на початку селектора, оскільки це зайве, оскільки ідентифікатор повинен бути унікальним для однієї сторінки. Це тільки для додання ясності прикладу.

Зверніть увагу на продуктивність та пам'ять , ці два приклади є хорошими виконавцями, оскільки вони не змушують jquery зберегти список елементів ul, які після цього потрібно було відфільтрувати.

Як це:

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

ОСНОВНЕ ОНОВЛЕННЯ:

Крім того, як красиво виглядає відповідь, ви також повинні задуматися над виконанням коду. Тому доречно також знати, що саме є в $(t)змінній. Це масив <TD>чи це <TR>вузол з кількома <TD>sвсередині нього? Щоб додатково проілюструвати точку, дивіться результати jsPerf у <ul>списку з 50 <li>дітьми:

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

$(t).first().next()Метод є найшвидшим тут, на сьогоднішній день.

Але, з іншого боку, якщо ви візьмете <tr>вузол і знайдете <td>дітей і проведете те саме тестування, результати не будуть однаковими.

Сподіваюся, це допомагає. :)

Я не бачив цього згадуваного тут, але ви також можете використовувати селектори специфікацій CSS. Дивіться документи

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

Спробуйте це:

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

або

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

Окрім використання методів jQuery, ви можете використовувати і рідну cellsколекцію, яку <tr>ви отримуєте.

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

Якщо припустити t, що це елемент DOM, ви можете обійти створення об'єкта jQuery.

t.cells[1].innerHTML

_{Дивно бачити, що ніхто не згадав про рідний спосіб JS.}

Без jQuery:

Просто отримайте доступ до childrenвластивості батьківського елемента. Він поверне живий HTMLCollection дітей елементів, до яких можна отримати доступ за допомогою індексу. Якщо ви хочете отримати другу дитину:

parentElement.children[1];

У вашому випадку щось подібне може спрацювати: (приклад)

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>

Ви також можете використовувати комбінацію CSS3-селекторів / querySelector()та використовувати :nth-of-type(). Цей метод може працювати краще в деяких випадках, оскільки в цьому випадку ви також можете вказати тип елемента td:nth-of-type(2) (приклад)

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

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

Використовуйте .find()метод

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

Ви можете використовувати два методи в jQuery, як наведено нижче-

Використання jQuery: nth-child Selector Ви поставили позицію елемента як його аргумент, який дорівнює 2, як ви хочете вибрати другий елемент li.

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

Використання jQuery: eq () Selector

Якщо ви хочете отримати точний елемент, вам слід вказати значення індексу елемента. Елемент списку починається з індексу 0. Щоб вибрати 2-й елемент li, вам потрібно використовувати 2 як аргумент.

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

Див. Приклад: Отримайте другий дочірній елемент списку в jQuery