JQuery：帮助使用 .each() 和 .append() 将图片添加到 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13485925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Help using .each() and .append() to add pictures to HTML
提问by cydonknight
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:
需要修复的简单错误，我无法弄清楚出了什么问题。我需要将相同的图片附加到 HTML 中的多个（五个）div。出于某种原因，我的代码向每个 div 附加了五次相同的图片。更清楚一点，五个 div 中的每一个都需要一张图片。现在，这五个人各有五张照片。这是 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!
这可能是我遗漏的一些小东西。任何帮助，将不胜感激！
回答by site
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:
如果您想首先使用五个 .letter-q div，则首先选择它们，以便“.each”运行该函数时，它正在使用这些 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">');
});
回答by ahren
$(".faq").each(function(){
$('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});
Add a contextto your selector
将 a 添加context到您的选择器
Read more: http://api.jquery.com/jQuery/
阅读更多：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">');
回答by arulmr
Try using this:
尝试使用这个：
$(".faq").each(function(){
$('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});
回答by jimbo
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).
值得注意的是，这个问题也可能有一个纯 CSS 解决方案。<img>您可以将图像源用作目标的背景，而不是在页面中插入标签（如果它还没有背景）。
Without knowing the structure of the HTML and other CSS applied, it's impossible to be sure, but here's a guess:
在不知道所应用的 HTML 和其他 CSS 的结构的情况下，无法确定，但这里有一个猜测：
.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;
}
回答by jimbo
You don't need the outer .each()call at all. Just the inner line should do what you want:
您根本不需要外部.each()调用。只是内线应该做你想要的：
$('.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.
您的代码相当于“对于每个 .faq（其中有五个），在页面上找到所有 .faq .letter-q 并添加图像”。你真正需要的是这句话的最后一个子句。
回答by Eddiedu
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
问候， 埃迪杜
回答by Jashwant
Try this,
尝试这个，
$(".faq").each(function(){
$(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">');
});
