JQuery: Trợ giúp sử dụng .each() và .append() để thêm ảnh vào HTML

Question

Lỗi đơn giản cần được sửa và tôi không thể tìm ra điều gì sai. Tôi cần nối thêm hình ảnh đó vào nhiều (năm) div trong HTML. Đối với một số lý do, mã của tôi là thêm cùng một hình ảnh năm lần cho mỗi div. Làm cho nó rõ ràng hơn, mỗi trong năm divs cần một hình ảnh. Ngay bây giờ, cả năm đều có năm hình ảnh. Đây là jQuery:

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

Đây là nơi mà nó đang được chèn vào:

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

Có năm của những trải ra khắp cơ thể.

Nó có thể là một cái gì đó nhỏ tôi đang mất tích. Bất kỳ trợ giúp sẽ được đánh giá cao!

Answer 1

Nếu bạn muốn làm việc với năm .letter-q div đầu tiên sau đó chọn chúng đầu tiên để ".each" khi hàm được chạy nó đang làm việc với những nhân 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">'); 
}); 

Thêm một context để chọn

của bạn Read more: http://api.jquery.com/jQuery/

Hoặc bạn có thể chỉ không sử dụng một vòng lặp ...

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

Answer 3

Hãy thử sử dụng này:

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

Answer 4

Bạn không cần bên ngoài, gọi số .each(). Chỉ cần dòng bên trong phải làm những gì bạn muốn:

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

Mã của bạn đang làm tương đương với "cho mỗi .faq (trong đó có năm), tất cả .faq .letter-q trên trang và thêm một tấm ảnh". Tất cả những gì bạn thực sự cần là mệnh đề cuối cùng của câu đó.

Answer 5

Nếu tôi hiểu những gì bạn cần, tất cả những gì bạn phải làm là chạy một lần chứ không phải vòng lặp.

Tôi đoán rằng vấn đề chính là khi bạn thực hiện vòng lặp này kết quả sẽ như thế này.

Trước khi vòng lặp:

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

Lần đầu tiên sẽ cho kết quả:

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

Lần thứ hai:

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

và vân vân ....

Trân , E ddiedu

Answer 6

Hãy thử điều này,

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

Answer 7

Nó đáng chú ý rằng có thể là một giải pháp thuần CSS cho vấn đề này là tốt.Thay vì chèn các thẻ <img> vào trang, bạn có thể sử dụng nguồn của hình ảnh làm nền cho mục tiêu (nếu nó chưa có nền).

Mà không biết cấu trúc của HTML và CSS khác áp dụng, nó không thể chắc chắn, nhưng đây là một đoán:

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