Получить второго ребенка с помощью jQuery

$(t).html()

возвращается

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

Я хочу получить второе tdот $(t)объекта. Я искал решение, но у меня ничего не получалось. Есть идеи, как получить второй элемент?

хватай второго ребенка:

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

или возьмите второго ребенка <td>:

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

Вот решение, которое может быть более понятным для чтения в коде:

Чтобы получить 2-го ребенка из неупорядоченного списка:

   $('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. Чтобы выбрать второй элемент li, вы должны использовать 2 в качестве аргумента.

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

См. Пример: Получить второй дочерний элемент списка в jQuery