Come ottenere i figli del selettore $ (questo)?


2229

Ho un layout simile a questo:

<div id="..."><img src="..."></div>

e vorrei utilizzare un selettore jQuery per selezionare il figlio imgall'interno del divclic.

Per ottenere il div, ho questo selettore:

$(this)

Come posso ottenere il bambino imgusando un selettore?

Risposte:


2854

Il costruttore jQuery accetta un secondo parametro chiamato contextche può essere utilizzato per sovrascrivere il contesto della selezione.

jQuery("img", this);

Che è lo stesso che usare in .find()questo modo:

jQuery(this).find("img");

Se le img che desideri sono solo discendenti diretti dell'elemento cliccato, puoi anche usare .children():

jQuery(this).children("img");

575
per quello che vale: jQuery ("img", questo) viene convertito internamente in: jQuery (questo) .find ("img") Quindi il secondo è sempre leggermente più veloce. :)
Paul Irish

24
Grazie @Paul, ero preoccupato che l'uso di find () fosse sbagliato , si scopre che è l'unico modo;)
Agos

5
Se il nodo è un figlio diretto, non sarebbe più veloce fare solo $ (questo) .children ('img'); ?
Adamyonk,

11
@adamyonk no, almeno non se questo è qualcosa da fare: jsperf.com/jquery-children-vs-find/3
Simon Stender Boisen,

3
Vedo l'esatto contrario di quanto affermato da @PaulIrish in questo esempio: jsperf.com/jquery-selectors-comparison-a . Qualcuno può fare luce? O ho sbagliato il test case o jquery ha cambiato questa ottimizzazione negli ultimi 4 anni.
Jonathan Vanasco,

471

Puoi anche usare

$(this).find('img');

che restituirebbe tutti imgi discendenti deldiv


In generale, sembra che $(this).children('img')sarebbe meglio. ad es. <div><img src="..." /><div><img src="..." /></div></div>perché presumibilmente l'utente vuole trovare imgs di 1 ° livello.
Buttle Butkus,

137

Se devi ottenere il primo imgche scende esattamente di un livello, puoi farlo

$(this).children("img:first")

6
Fa :firstcorrispondere solo " verso il basso esattamente un livello ", o lo fa corrispondere la "prima" img che è stato trovato?
Ian Boyd,

3
@IanBoyd, .children()è da dove viene il "down esattamente di un livello" ed :firstè da dove viene il "primo".
Tyler Crompton,

3
@IanBoyd, quell'elemento non sarebbe stato preso in considerazione. Si applica solo se si utilizza .find()invece di.children()
Tyler Crompton il

2
se stai usando: prima con un .find () fai attenzione, jQuery sembra trovare tutti i discendenti e quindi restituire il primo elemento, molto costoso a volte
Clarence Liu

1
@ButtleButkus Nella domanda, thisera già un riferimento al <div>contenimento del <img>, tuttavia se hai più livelli di tag da attraversare dal riferimento che avevi, allora sicuramente potresti comporre più di una children()chiamata
rakslice,

76

Se il tuo tag DIV è immediatamente seguito dal tag IMG, puoi anche usare:

$(this).next();

16
.next () è davvero fragile, a meno che tu non possa sempre garantire che l'elemento sarà l'elemento successivo, è meglio usare un metodo diverso. In questo caso, l'IMG è un discendente, non un fratello, del div.
LocalPCGuy

L'OP ha esplicitamente chiesto un figlio img all'interno del div.
Giorgio Tempesta,

65

I bambini diretti lo sono

$('> .child-class', this)

3
Questa risposta è potenzialmente fuorviante in quanto non esiste alcun elemento con una classe "figlio", quindi non funzionerà.
Giorgio Tempesta,

41

Puoi trovare tutti gli elementi img del div parent come di seguito

$(this).find('img') or $(this).children('img')

Se vuoi un elemento img specifico, puoi scrivere così

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

Il tuo div contiene solo un elemento img. Quindi per questo sotto è giusto

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

Ma se il tuo div contiene più elementi img come di seguito

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

quindi non puoi usare il codice superiore per trovare il valore alt del secondo elemento img. Quindi puoi provare questo:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

Questo esempio mostra un'idea generale di come trovare l'oggetto reale all'interno dell'oggetto genitore. È possibile utilizzare le classi per differenziare l'oggetto figlio. È facile e divertente. vale a dire

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

Puoi farlo come di seguito:

 $(this).find(".first").attr("alt")

e più specifico come:

 $(this).find("img.first").attr("alt")

Puoi usare find o children come sopra. Per ulteriori informazioni, visitare Bambini http://api.jquery.com/children/ e Trova http://api.jquery.com/find/ . Vedi esempio http://jsfiddle.net/lalitjs/Nx8a6/


35

Modi per fare riferimento a un bambino in jQuery. L'ho riassunto nel seguente jQuery:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

Vorrei usare l'ennesimo bambino ()
A McGuinness il

31

Senza conoscere l'ID del DIV penso che potresti selezionare l'IMG in questo modo:

$("#"+$(this).attr("id")+" img:first")

54
questo probabilmente funziona davvero ma è un po 'la risposta del Rube Goldberg :)
Scott Evernden

8
e se hai intenzione di usare quel codice, almeno esegui: $ ("#" + this.id + "img: first")
LocalPCGuy

10
@LocalPCGuy Volevi dire: "e se hai intenzione di usare quel codice
chiedi

Perché dovresti farlo se 'this' seleziona già il div attuale? Inoltre, se il div non ha un ID questo codice non funzionerà.
Giorgio Tempesta,

31

Prova questo codice:

$(this).children()[0]

13
funzionerebbe anche se restituisce un elemento dom non un oggetto
jq

2
Non so se è l'approccio migliore per la situazione attuale, ma se si vuole seguire questa strada e ancora finire con un oggetto jQuery, Basta avvolgere in questo modo: $($(this).children()[0]).
Patridge

19
o ancora più facile$(this:first-child)
rémy

4
invece di $($(this).children()[x])usare $(this).eq(x)o se vuoi il primo, giusto $(this).first().
Cristi Mihai,

16
@ rémy: non è nemmeno una sintassi valida. (
Ci sono voluti

23

È possibile utilizzare uno dei seguenti metodi:

1 find ():

$(this).find('img');

2 bambini():

$(this).children('img');

21

jQuery eachè un'opzione:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});

15

È possibile utilizzare Child Selecor per fare riferimento agli elementi figlio disponibili all'interno del padre.

$(' > img', this).attr("src");

E il seguito è se non si ha riferimento a $(this)e si desidera fare riferimento imgdisponibile all'interno di divda un'altra funzione.

 $('#divid > img').attr("src");


8

Ecco un codice funzionale, puoi eseguirlo (è una semplice dimostrazione).

Quando si fa clic sul DIV si ottiene l'immagine da alcuni metodi diversi, in questa situazione "questo" è il DIV.

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

Spero che sia d'aiuto!


5

Potresti avere da 0 a molti <img>tag all'interno del tuo <div>.

Per trovare un elemento, utilizzare a .find().

Per proteggere il tuo codice, usa a .each().

L'uso .find()e .each()insieme impedisce errori di riferimento nulli nel caso di 0 <img>elementi consentendo al contempo la gestione di più <img>elementi.

// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {

  // Find the image using.find() and .each()
  $(this).find("img").each(function() {
  
        var img = this;  // "this" is, now, scoped to the image element
        
        // Do something with the image
        $(this).animate({
          width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
        
  });
  
});
#mydiv {
  text-align: center;
  vertical-align: middle;
  background-color: #000000;
  cursor: pointer;
  padding: 50px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="mydiv">
  <img src="" width="100" height="100"/>
</div>


Perché hai fatto questo? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
Chris22,

Non so come o dove @Alex stia usando il suo frammento. Quindi l'ho reso il più sicuro e generico possibile. Associare un evento a body lo farà in modo che l'evento si inneschi anche se il div non era nel dom al momento della creazione dell'evento. Cancellare l'evento prima di crearne uno nuovo impedisce al gestore di essere eseguito più di una volta quando viene attivato un evento. Non è necessario farlo a modo mio. Anche il semplice collegamento dell'evento al div avrebbe funzionato.
Jason Williams,

Grazie. L'ho già visto in uno script e mentre funzionava per quello che intendeva il programmatore, quando ho provato a usarlo per una finestra modale, l'evento ha comunque creato diverse modali con un solo clic. Immagino che lo stavo usando male, ma ho finito per usare event.stopImmediatePropagation()l'elemento per evitare che ciò accadesse.
Chris22,

4

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>


0

Puoi usare

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>

In che modo differisce dalla risposta di Philnash 11 anni fa?
David

0

Se il tuo img è esattamente il primo elemento all'interno di div, allora prova

$(this.firstChild);

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.