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

问题:

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!

回答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">');
});

回答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">');

回答3:

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

回答4:

Try using this:

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

回答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.

回答6:

If I understood what you need, all you gotta do is run once and not a loop.

I guess that the main problem is that when your doing this loop the result should be like this.

Before loop:

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

The first time will result:

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

The second time:

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

and so on ....

Regards, Eddiedu

回答7:

Try this,

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