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

Question

$(t).html()

возвращает

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

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

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

Answer 3

Как это:

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

---

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

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

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

Метод $(t).first().next() здесь самый быстрый из всех.

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

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

Answer 4

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

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

Answer 5

Попробуйте это:

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

или

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

Answer 6

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

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

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

t.cells[1].innerHTML

Answer 7

_{Удивительно, что никто не упомянул собственный способ 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>

Answer 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