Question

需要修复的简单错误，我无法弄清楚出了什么问题。我需要将相同的图片附加到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>

其中有五种散布在全身。

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

Answer 1

如果你想首先使用五个.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">');
});

Answer 2

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

将context添加到您的选择器

了解详情：http://api.jquery.com/jQuery/

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

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

Answer 3

值得注意的是，这个问题可能还有一个纯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;
}

Answer 4

尝试使用：

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

Answer 5

根本不需要外部.each()来电。内线应该做你想做的事情：

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

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

Answer 6

如果我明白你需要什么，你所要做的就是跑一次而不是循环。

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

之前循环：

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

依旧......

此致 Eddiedu

Answer 7

试试这个，

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

JQuery：帮助使用.each（）和.append（）将图片添加到HTML

7 个答案: