8

需要修复的简单错误，我不知道出了什么问题。我需要将同一张图片附加到 HTML 中的多个（五个）div 中。出于某种原因，我的代码向每个 div 附加了五次相同的图片。更清楚地说，五个 div 中的每一个都需要一张图片。现在，这五个人各有五张照片。这是JQUERY：

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

这是它被插入的地方：

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

其中有五个散布在全身。

这可能是我想念的小东西。任何帮助，将不胜感激！

4

7 回答 7

11

如果您想首先使用五个 .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">');
});
于 2012-11-21T03:37:33.257 回答
5 
$(".faq").each(function(){
        $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});

将 a 添加context到您的选择器

阅读更多：http ://api.jquery.com/jQuery/

或者你可以不使用循环......

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">');
于 2012-11-21T03:35:39.157 回答
2

尝试使用这个：

$(".faq").each(function(){
    $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});
于 2012-11-21T03:37:09.390 回答
2

值得注意的是，这个问题可能也有一个纯 CSS 解决方案。<img>您可以使用图像的源作为目标的背景（如果它还没有背景），而不是在页面中插入标签。

如果不知道所应用的 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;
}
于 2012-11-21T03:45:57.143 回答
1

你根本不需要外部.each()调用。只是内线应该做你想要的：

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

您的代码相当于“对于每个 .faq（其中有五个），在页面上查找所有 .faq .letter-q 并添加图像”。您真正需要的是该句子的最后一个子句。

于 2012-11-21T03:39:19.693 回答
1

如果我了解您的需求，您所要做的就是运行一次而不是循环。

我想主要的问题是当你做这个循环时，结果应该是这样的。

循环前：

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

第一次将导致：

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

第二次：

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

等等 ....

问候， 埃迪杜

于 2012-11-21T03:40:23.197 回答
0

试试这个，

$(".faq").each(function(){
        $(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">');
});
于 2012-11-21T03:42:23.473 回答