Zdobądź drugie dziecko za pomocą jQuery

$(t).html()

zwroty

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

Chcę odzyskać drugi tdz $(t)obiektu. Szukałem rozwiązania, ale nic mi nie działało. Masz pomysł, jak zdobyć drugi element?

złap drugie dziecko:

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

lub złap drugie dziecko <td>:

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

Oto rozwiązanie, które może być łatwiejsze do odczytania w kodzie:

Aby uzyskać 2. dziecko z listy nieuporządkowanej:

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

I bardziej rozbudowany przykład: ten kod pobiera tekst atrybutu „tytuł” ​​drugiego elementu potomnego UL identyfikowanego jako „moja_lista”:

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

W tym drugim przykładzie możesz pozbyć się „ul” na początku selektora, ponieważ jest on zbędny, ponieważ identyfikator powinien być unikalny dla pojedynczej strony. Ma to na celu zwiększenie przejrzystości przykładu.

Uwaga na temat wydajności i pamięci , te dwa przykłady są dobre, ponieważ nie zmuszają jquery do zapisania listy elementów ul , które musiały być później 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 odradza się również wiedzieć, co dokładnie znajduje się w $(t)zmiennej. Czy jest to tablica <TD>czy <TR>węzeł z kilkoma w <TD>sśrodku? Aby dodatkowo zilustrować ten punkt, zobacz wyniki jsPerf na <ul>liście z 50 <li>dziećmi:

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

Jak $(t).first().next()dotąd metoda ta jest najszybsza.

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

Mam nadzieję, że to pomoże. :)

Nie widziałem tego tutaj wymienionego, ale możesz także użyć selektorów specyfikacji CSS. Zobacz dokumenty

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

Spróbuj tego:

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

lub

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

Oprócz korzystania z metod jQuery możesz także korzystać z natywnej cellskolekcji, którą <tr>Ci daje.

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

Zakładając, że tjest to element DOM, można pominąć tworzenie obiektu jQuery.

t.cells[1].innerHTML

_{Zaskakujące jest to, że nikt nie wspomniał o natywnym sposobie JS, aby to zrobić ...}

Bez jQuery:

Wystarczy uzyskać dostęp do childrenwłaściwości elementu nadrzędnego. Będzie to powrót do żywych HTMLCollection dzieci elementów, które mogą być dostępne przez indeks. Jeśli chcesz zdobyć drugie dziecko:

parentElement.children[1];

W twoim przypadku coś takiego może dział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żesz także użyć kombinacji selektorów CSS3 / querySelector()i wykorzystać :nth-of-type(). Ta metoda może działać lepiej w niektórych przypadkach, ponieważ w tym przypadku można również określić typ elementu 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 .find()metody

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

Korzystanie z jQuery: Selektor n-podrzędny Umieściłeś pozycję elementu jako jego argument, który wynosi 2, gdy chcesz wybrać drugi element li.

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

Korzystanie z jQuery: Selektor eq ()

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 argumentu.

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

Zobacz przykład: Uzyskaj drugi element podrzędny listy w jQuery