Pobierz drugie dziecko za pomocą jQuery

Oto rozwiązanie, które być może jest jaśniejsze do odczytania w kodzie:

Aby uzyskać drugie dziecko z listy nieuporządkowanej:

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

I bardziej rozbudowany przykład: Ten kod otrzymuje tekst atrybutu "title" drugiego elementu potomnego UL identyfikowanego jako "my_list":

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

W tym drugim przykładzie można pozbyć się 'ul' na początku selektora, ponieważ jest zbędny, ponieważ identyfikator powinien być unikalny dla pojedynczej strony. Jest tam tylko po to, aby dodać jasności na przykład.

Uwaga na wydajność i pamięć, te dwa przykłady są dobrymi performantami, ponieważ nie sprawiają, że jquery zapisuje listę UL elementów, które musiały być następnie filtrowane.

Jak to jest:

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

GŁÓWNA AKTUALIZACJA:

Oprócz tego, jak pięknie wygląda odpowiedź, musisz również zastanowić się nad wydajnością kodu. Dlatego też warto wiedzieć, co dokładnie znajduje się w zmiennej $(t). Czy jest to tablica <TD> czy jest to <TR> węzeł z kilkoma <TD>s wewnątrz? Aby jeszcze bardziej zilustrować punkt, Zobacz Wyniki jsPerf na liście <ul> z 50 <li> dzieci:

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

Metoda $(t).first().next() jest najszybsza tutaj.

Ale z drugiej strony, jeśli weźmiesz węzeł <tr> i znajdziesz dzieci <td> i wykonasz ten sam test, wyniki nie będą takie same.

Nie widziałem tego tutaj, ale możesz również użyć selektorów CSS spec. Zobacz dokumenty

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

Spróbuj tego:

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

Lub

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

Oprócz używania metod jQuery, możesz użyć natywnej kolekcji cells, którą daje ci <tr>.

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

Zakładając, że t jest elementem DOM, możesz ominąć tworzenie obiektu jQuery.

t.cells[1].innerHTML

_{zaskakujące jest to, że nikt nie wspomniał o rodzimym sposobie JS na to..}

Bez jQuery:

Wystarczy wejść do children właściwość elementu nadrzędnego. Zwróci live HTMLCollection elementów potomnych, do których można uzyskać dostęp za pomocą indeksu. Jeśli chcesz mieć drugie dziecko:

parentElement.children[1];

W Twoim przypadku, coś takiego może zadziałać: (przykład)

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>

Można również użyć kombinacji Selektory CSS3/ querySelector() i wykorzystać :nth-of-type(). Ta metoda może działać lepiej w niektórych przypadkach, ponieważ można również określić typ elementu, w tym przypadku td:nth-of-type(2) (przykład)

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

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

Użyj metody .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

Możesz użyć dwóch metod w jQuery, jak podano poniżej -

Używanie jQuery: Nth-child Selector Umieściłeś pozycję elementu jako jego argument, który jest 2, Jak chcesz wybrać drugi element li.

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

Using jQuery: EQ () Selector

Jeśli chcesz uzyskać dokładny element, musisz podać wartość indeksu elementu. Element listy zaczyna się od indeksu 0. Aby wybrać 2 element li, musisz użyć 2 jako kłótnia.

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

Zobacz przykład: Get Second Child Element of List in jQuery