Ottieni il secondo figlio usando jQuery

$(t).html()

ritorna

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

Voglio recuperare il secondo tddalla $(t)oggetto. Ho cercato una soluzione ma niente ha funzionato per me. Qualche idea su come ottenere il secondo elemento?

prendi il secondo figlio:

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

oppure prendi il secondo figlio <td>:

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

Ecco una soluzione che forse è più chiara da leggere nel codice:

Per ottenere il 2 ° figlio di un elenco non ordinato:

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

E un esempio più elaborato: questo codice ottiene il testo dell'attributo 'title' del 2 ° elemento figlio dell'UL identificato come 'my_list':

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

In questo secondo esempio, è possibile eliminare "ul" all'inizio del selettore, poiché è ridondante, poiché un ID deve essere univoco per una singola pagina. È lì solo per aggiungere chiarezza all'esempio.

Nota su prestazioni e memoria , questi due esempi sono buoni risultati, perché non fanno salvare jquery un elenco di ul elementi che dovevano essere filtrati in seguito.

Com'è questo:

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

MAGGIOR AGGIORNAMENTO:

A parte la bellezza della risposta, devi anche riflettere sull'esecuzione del codice. Pertanto, è anche importante sapere cosa si trova esattamente nella $(t)variabile. È un array di <TD>o è un <TR>nodo con diversi <TD>sal suo interno? Per illustrare ulteriormente il punto, vedere i punteggi di jsPerf in un <ul>elenco con 50 <li>bambini:

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

Il $(t).first().next()metodo è il più veloce qui, di gran lunga.

D'altra parte, se prendi il <tr>nodo e trovi i <td>bambini ed esegui lo stesso test, i risultati non saranno gli stessi.

Spero che sia d'aiuto. :)

Non l'ho visto menzionato qui, ma puoi anche usare selettori di specifiche CSS. Vedi i documenti

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

Prova questo:

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

o

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

Oltre a utilizzare i metodi jQuery, puoi utilizzare la cellsraccolta nativa che <tr>ti dà.

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

Supponendo che tsia un elemento DOM, è possibile ignorare la creazione di oggetti jQuery.

t.cells[1].innerHTML

_{È sorprendente vedere che nessuno ha menzionato il modo nativo di JS per farlo.}

Senza jQuery:

Accedi alla childrenproprietà dell'elemento genitore. Restituirà una raccolta HTMLC live di elementi figlio a cui è possibile accedere tramite un indice. Se vuoi avere il secondo figlio:

parentElement.children[1];

Nel tuo caso, qualcosa del genere potrebbe funzionare: (esempio)

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>

Puoi anche usare una combinazione di selettori CSS3 / querySelector()e utilizzare :nth-of-type(). Questo metodo può funzionare meglio in alcuni casi, poiché è anche possibile specificare il tipo di elemento, in questo caso td:nth-of-type(2) (esempio)

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

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

Usa il .find()metodo

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

Puoi usare due metodi in jQuery come indicato di seguito-

Usando jQuery: Selettore nth-child Hai messo la posizione di un elemento come argomento, che è 2 come vuoi selezionare il secondo elemento li.

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

Utilizzando jQuery: eq () Selector

Se si desidera ottenere l'elemento esatto, è necessario specificare il valore dell'indice dell'elemento. Un elemento di elenco inizia con un indice 0. Per selezionare il secondo elemento di li, è necessario utilizzare 2 come argomento.

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

Vedi Esempio: Ottieni l'elemento secondario dell'elenco in jQuery