JQuery：帮助使用 .each() 和 .append() 将图片添加到 HTML答案

【问题标题】：JQuery: Help using .each() and .append() to add pictures to HTMLJQuery：帮助使用 .each() 和 .append() 将图片添加到 HTML
【发布时间】：2012-11-09 06:30:25
【问题描述】：

需要修复的简单错误，我不知道出了什么问题。我需要将同一张图片附加到 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>

其中有五个散布在全身。

这可能是我缺少的一些小东西。任何帮助将不胜感激！

【问题讨论】：

标签： jquery html append each

【解决方案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">');
});

【讨论】：

【解决方案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">');

【讨论】：

为了完整起见，您的代码 $('.faq .letter-q') 正在整个 DOM 中搜索匹配的节点并找到其中的 5 个，它正在为您拥有的每个 $(".faq") 节点执行此操作。因此，在每个循环中，您对所有 5 个节点都是 appending。因此，为什么您会获得 5 * 5 的图像。

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案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>

等等....

问候，埃迪杜

【讨论】：

【解决方案7】：

试试这个，

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

【讨论】：