JQuery: guida l'uso di .each() e .append() per aggiungere immagini all'HTML

Question

Bug semplice da correggere e non riesco a capire cosa c'è che non va. Devo aggiungere la stessa immagine a più (cinque) div nel codice HTML. Per qualche ragione, il mio codice aggiunge la stessa immagine cinque volte a ogni div. Per renderlo più chiaro, ognuna delle cinque div ha bisogno di un'immagine. In questo momento, tutti e cinque hanno cinque foto ciascuno. Ecco l'jQuery:

$(".faq").each(function(){ 
     $('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Questo è dove viene inserito:

<div class="letter-q"></div> 

ci sono cinque di quelli sparsi in tutto il corpo.

Probabilmente è qualcosa di piccolo che mi manca. Qualsiasi aiuto sarebbe apprezzato!

Answer 1

Se si desidera lavorare con i cinque .letter-q del div prima poi selezionarle prima in modo che il tempo ".Ogni" la funzione viene eseguita la collaborazione con quelle di div:

$('.faq .letter-q').each(function(){ 
    //this wrapped in jQuery will give us the current .letter-q div 
    $(this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 2

$(".faq").each(function(){ 
     $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Aggiungi un context al selettore

Per saperne di più: http://api.jquery.com/jQuery/

O non si può semplicemente utilizzare un ciclo ...

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">'); 

Answer 3

Prova ad usare questo:

$(".faq").each(function(){ 
    $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 4

Non è necessario il chiamata esterna .each(). Proprio la linea interna dovrebbe fare quello che vuoi:

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question" />'); 

Il codice sta facendo l'equivalente di "per ogni .faq (di cui ci sono cinque), trovare tutti .faq .letter-q sulla pagina e aggiungere un'immagine". Tutto ciò di cui hai veramente bisogno è l'ultima clausola di quella frase.

Answer 5

Se ho capito cosa ti serve, tutto ciò che devi fare è eseguire una volta e non un ciclo.

Immagino che il problema principale sia che quando si esegue questo ciclo il risultato dovrebbe essere come questo.

Prima ciclo:

<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 
<div class="letter-q"></div> 

La prima volta che si tradurrà:

<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div> 

la seconda volta:

<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div> 

e così via ....

Saluti , E ddiedu

Answer 6

Prova questo,

$(".faq").each(function(){ 
     $(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">'); 
}); 

Answer 7

Vale la pena notare che c'è probabilmente una soluzione di pura-CSS a questo problema pure.Piuttosto che inserire i tag <img> nella pagina, è possibile utilizzare la fonte dell'immagine come sfondo della destinazione (se non ha già uno sfondo).

Senza conoscere la struttura del HTML e altro CSS applicata, è impossibile essere sicuri, ma qui è una supposizione:

.faq .letter-q { 
    padding-right: 20px; /* or however wide the image is */ 
    min-height: 20px; /* or however tall the image is */ 
    background-image: url(images/faq-q.png); 
    background-position-x: 100%; 
    background-position-y: 50%; 
    background-repeat: no-repeat; 
}