JQuery: Help using .each() and .append() to add pictures to HTML

Question

Simple bug that needs to be fixed and I can't figure out what's wrong. I need to append the same picture to multiple (five) divs in the HTML. For some reason, my code is appending the same picture five times to each div. Making it more clear, each of the five divs needs one picture. Right now, all five have five pictures each. Here is the JQUERY:

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

This is where it is being inserted:

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

There are five of those spread out across the body.

It's probably something small I'm missing. Any help would be appreciated!

Solution 1

If you want to work with the five .letter-q div's first then select them first so that ".each" time the function is run it is working with those div's:

$('.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">');
});

Solution 2

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

Add a context to your selector

Read more: http://api.jquery.com/jQuery/

Or you can just not use a loop...

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

Solution 3

Try using this:

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

Solution 4

It's worth noting that there's probably a pure-CSS solution to this problem as well. Rather than inserting <img> tags in the page, you could use the source of the image as a background to the target (if it doesn't have a background already).

Without knowing the structure of the HTML and other CSS applied, it's impossible to be sure, but here's a guess:

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

Solution 5

You don't need the outer .each() call at all. Just the inner line should do what you want:

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

Your code is doing the equivalent of "for each .faq (of which there are five), find all .faq .letter-q on the page and add an image". All you really need is the last clause of that sentence.

View more solutions

Comments

[Blair McMillan]

For completeness, your code $('.faq .letter-q') is searching the entire DOM for nodes that match and it's finding 5 of them, it is doing this for each $(".faq") node that you have. So in each loop, you are appending to all 5 nodes. Hence why you are getting 5 * 5 of your image.