jQuery: come arrivare a un particolare figlio di un genitore?

92

Per dare un esempio semplificato, ho ripetuto molte volte il seguente blocco sulla pagina (è generato dinamicamente):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

Quando si fa clic, posso arrivare al genitore del collegamento con:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Tuttavia ... devo contattare il <div class="something1">genitore in particolare.

Fondamentalmente, qualcuno può dirmi come fare riferimento a un fratello di livello superiore senza poterlo fare direttamente? Chiamiamolo fratello maggiore. Un riferimento diretto al nome della classe del fratello maggiore causerebbe la dissolvenza in chiusura di ogni istanza di quell'elemento sulla pagina, il che non è l'effetto desiderato.

Ho provato:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Qualcuno? Grazie.

— Tom
fonte

La risposta di Anurag potrebbe non sembrare quella giusta -mi ha fatto sicuramente fermare e pensare- ma sta evidenziando un errore di battitura palese nel tuo codice che sta causando il fallimento del tuo selettore. Il selettore, in jQuery, è.parent() non .parents()

— David dice reintegrare Monica

@ricebowl: sbagliato. api.jquery.com/parents

— SLaks

@ricebowl ... parent () mi darebbe div qualcosa2, quindi ho bisogno che i genitori () arrivino alla casella div.

— Tom

Ah; Mie scuse. Umm ... non so se sia meglio lasciare in bella mostra la mia ignoranza, o cancellare l'errore per non turbare qualcun altro ... = | Tuttavia, almeno oggi ho imparato qualcosa di utile; questo è il punto, vero ..? =)

— David dice di reintegrare Monica

1

@ricebowl, non preoccuparti, grazie per aver contribuito.

— Tom

144

La chiamata .parents(".box .something1")restituirà tutti gli elementi padre che corrispondono al selettore .box .something. In altre parole, restituirà gli elementi padre che sono .something1e si trovano all'interno di .box.

Devi ottenere i figli del genitore più vicino, in questo modo:

$(this).closest('.box').children('.something1')

Questo codice chiama .closestper ottenere il genitore più interno che corrisponde a un selettore, quindi chiama .childrenl'elemento genitore per trovare lo zio che stai cercando.

— SLaks
fonte

So che questo è un po 'vecchio, ma non è meglio in questo caso usare parent () piuttosto che Closer () poiché immagino che ci sia più attraversamento degli alberi con più vicino () ?

— rmorse

1

@acSlater: Ha bisogno di attraversare gli alberi. parent()è l'elemento sbagliato.

— SLaks

Ah sì, è genitore (). Genitore () che Tom ha bisogno di scusa! :)

— rmorse

1

@acSlater: Sì; quello funzionerebbe. Tuttavia, rende il Javascript molto più accoppiato alla struttura HTML. .closest(...)è più resistente e anche più leggibile.

— SLaks

7

Nel caso qualcuno se lo stesse chiedendo: dopo aver trovato il genitore giusto usando .closest (), se stai cercando un elemento figlio che NON è un figlio diretto (ma un figlio di un bambino, per esempio), usa semplicemente. find () al posto di .children.

— Fabien Snauwaert

17

$(this).parent()

L'attraversamento degli alberi è divertente

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

E molti altri modi in cui potresti trovare utili questi documenti .

— Anurag
fonte

Grazie ma non stavo cercando il genitore, ma piuttosto un altro figlio del genitore (o nonno in realtà).

— Tom

Hehe ... è davvero un affare di famiglia.

— Tom

13

Questo troverà il primo genitore con classe, boxquindi troverà la prima classe figlio con corrispondenza regex somethinge otterrà l'id.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

— user2601995
fonte

6

Se ho capito bene il tuo problema, $(this).parents('.box').children('.something1')è questo quello che stai cercando?

— Teja Kantamneni
fonte

5

Puoi usare .each()con .children()e un selettore tra parentesi:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

— Olly
fonte