Come ottenere i figli dal selettore $ (questo)?

Ho un layout simile a questo:

e vorrebbe usare un selettore jQuery per selezionare il bambino img all’interno del div al clic.

Per ottenere il div , ho questo selettore:

 $(this) 

Come posso ottenere il bambino img usando un selettore?

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

 jQuery("img", this); 

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

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

Se le immagini che desideri sono solo discendenti diretti dell’elemento cliccato, puoi anche utilizzare .children() :

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

Puoi anche usare

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

che restituirebbe tutti gli img che sono discendenti del div

Se hai bisogno di ottenere il primo img che è giù esattamente di un livello, puoi farlo

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

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

 $(this).next(); 

I bambini diretti sono

 $('> .child', this) 

Puoi trovare tutti gli elementi img del genitore div come sotto

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

Se vuoi un elemento img specifico puoi scrivere in questo modo

 $(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 qui sotto è giusto

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

Ma se il tuo div contiene più img elemento come sotto

 
3 4

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 è ansible trovare l’object reale all’interno dell’object padre. È ansible utilizzare le classi per differenziare l’object figlio. È facile e divertente. vale a dire

 
3 4

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 visita http://api.jquery.com/children/ per bambini e trova http://api.jquery.com/find/ . Vedi l’esempio http://jsfiddle.net/lalitjs/Nx8a6/

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

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

Modi per riferirsi a un bambino in jQuery. L’ho riepilogato nel seguente jQuery:

 $(this).find("img"); // any img tag child or grandchild etchttps://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector/... $(this).children("img"); //any img tag child that is direct descendant $(this).find("img:first") //any img tag first child or first grandchild etchttps://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector/... $(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 

Prova questo codice:

 $(this).children()[0] 

È ansible utilizzare uno dei seguenti metodi:

1 trova ():

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

2 bambini():

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

each di jQuery è una:

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

È ansible utilizzare Child Selecor per fare riferimento agli elementi figlio disponibili all’interno del genitore.

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

E il sotto è se non si ha riferimento a $(this) e si vuole fare riferimento a img disponibile all’interno di un div da un’altra funzione.

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

Anche questo dovrebbe funzionare:

 $("#id img") 

Puoi avere da 0 a molti tag all’interno del tuo

.

Per trovare un elemento, usa un .find() .

Per mantenere il tuo codice sicuro, usa un .each() .

L’uso di .find() e .each() insieme impedisce errori di riferimento nulli nel caso di elementi 0 consentendo anche la gestione di più 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; } 
  

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

Quando fai clic sul DIV ottieni l’immagine da 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  console.log('Method #3: '+$(this).find('img:eq(0)')); }); }); 
 .the_div{ background-color: yellow; width: 100%; height: 200px; } 
  
 $(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  console.log('Method #3: '+$(this).find('img:eq(0)')); }); }); 
 .the_div{ background-color: yellow; width: 100%; height: 200px; }