JQuery: Pomoc przy użyciu .each() i .append(), aby dodać zdjęcia do HTML

Question

Prosty błąd, który należy naprawić i nie mogę dowiedzieć się, co jest nie tak. Muszę dołączyć to samo zdjęcie do wielu (pięciu) elementów div w kodzie HTML. Z jakiegoś powodu mój kod dodaje pięć razy ten sam obraz do każdego elementu div. Co więcej, każdy z pięciu elementów div potrzebuje jednego obrazu. W tej chwili wszystkie pięć ma po pięć zdjęć. Tutaj jest jQuery:

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

To gdzie to jest w brzmieniu:

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

Istnieje pięć z nich rozłożone na całym ciele.

To prawdopodobnie coś małego, czego mi brakuje. Każda pomoc będzie doceniona!

Answer 1

Jeśli chcesz pracować z pięciu .letter-q div najpierw wybierz je najpierw tak, że „.each” czas funkcja jest prowadzona jest praca z tych 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">'); 
}); 

Dodaj context do selektora

Więcej: http://api.jquery.com/jQuery/

Albo po prostu nie można użyć pętli ...

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

Answer 3

Spróbuj użyć tego:

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

Answer 4

Nie potrzebne zewnętrzna .each() zadzwoń. Tylko wewnętrzna linia powinna zrobić to, co chcesz:

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

Kod robi równowartość „dla każdego .faq (których jest pięć), znaleźć wszystko .faq .letter-Q na stronie i dodać obraz". Wszystko, czego naprawdę potrzebujesz, to ostatnia klauzula tego zdania.

Answer 5

Jeśli zrozumiałem, czego potrzebujesz, wszystko co musisz zrobić, to uruchomić raz, a nie pętlę.

Domyślam się, że głównym problemem jest to, że podczas wykonywania tej pętli wynik powinien być taki.

Przed pętli:

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

po raz pierwszy będzie WYNIK:

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

po raz drugi:

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

i tak dalej ....

Pozdrawiam , E ddiedu

Answer 6

Spróbuj tego,

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

Answer 7

Warto zauważyć, że nie ma chyba rozwiązanie czystego CSS do tego problemu, jak również.Zamiast wstawiania tagów <img> na stronie, możesz użyć źródła obrazu jako tła do celu (jeśli nie ma już tła).

Nie znając strukturę HTML i innych CSS stosowane, to jest niemożliwe, aby mieć pewność, ale tutaj jest przypuszczenie:

.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; 
}