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

Ответ 1

захватить второго ребенка:

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

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

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

Ответ 2

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

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

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

И более подробный пример: Этот код получает текст атрибута "title" второго дочернего элемента UL, идентифицированного как "my_list":

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

В этом втором примере вы можете избавиться от 'ul' в начале селектора, поскольку он избыточен, потому что идентификатор должен быть уникальным для одной страницы. Это просто для добавления ясности в пример.

Примечание по Производительность и память, эти два примера являются хорошими исполнителями, потому что они не позволяют jquery сохранять список элементов ul, которые впоследствии нужно было отфильтровать.

Ответ 3

Как это:

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

ОСНОВНОЕ ОБНОВЛЕНИЕ:

Помимо того, насколько красив ответ, вы должны также подумать о производительности кода. Поэтому он также знает, что именно находится в переменной $(t). Является ли это массивом <TD> или это <TR> node с несколькими <TD>s внутри него? Чтобы дополнительно проиллюстрировать эту точку, см. Оценки jsPerf в списке <ul> с 50 <li> детьми:

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

Метод $(t).first().next() является самым быстрым здесь, безусловно.

Но, с другой стороны, если вы берете <TR> node и находите детей <TD> и запускаете один и тот же тест, результаты не будут одинаковыми.

Надеюсь, это поможет.:)

Ответ 4

Попробуйте следующее:

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

или

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

Ответ 5

Я не видел, чтобы это упоминалось здесь, но вы также можете использовать селектор спецификаций CSS. Смотрите документы

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

Ответ 6

В дополнение к использованию методов jQuery вы можете использовать собственную коллекцию cells, которую предоставляет <tr>.

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

Предполагая, что t является элементом DOM, вы можете обойти создание объекта jQuery.

t.cells[1].innerHTML

Ответ 7

_{Удивительно, что никто не упомянул родной способ JS сделать это.}

Без jQuery:

Просто войдите в children свойство родительского элемента. Он вернет live 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>

Ответ 8

Использовать метод .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