javascript - 我是否错误地使用了 jQuery .each 函数？

Question

我正在使用一些 jQuery 从第三方网站检索和解析一些 JSON，因此我可以使用该网站中的图像来填充图库。

详情请看下面，并转载于this JSFiddle :

 $(document).ready(function() {
   function populateImages(path) {
     $('.crush').each(function() {
       $(this).html('<img src="' + path + '/>');
     });
   }
   $.ajax({
     url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
     dataType: "jsonp",
     type: "get",
     success: function(data) {
       var regex = /"/g;
       var i = 0;
       for (i = 0; i < 20; i++) {
         var content = data.posts[i].content_display;
         var part1 = content.split('src="');
         var part2 = part1[1].split(regex);
         var imgPath = part2[0];
         console.log(imgPath);
         populateImages(imgPath);

       }
     }
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Result:</h1>

<div id="result">
  <div class="pure-g">
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
  </div>
</div>

我知道检索 JSON 查询的部分正在工作，因为它正在输出我想要在控制台中获取的图像路径。然而，最后一部分是使用 jQuery .each 函数添加一个标签并用我通过 AJAX 检索到的路径填充它，但它不起作用。

不知道我做错了什么。

请注意，虽然第二部分位于其自己的名为 populateImages 的函数中，但我尝试将该代码嵌入到循环部分中，并且仍然具有相同的效果。

如果有人能提供帮助，我们将不胜感激。

Answer 1

您不应该为此使用 each，它只意味着您将在第一个 URL 的每个元素中放置一个图像，然后将它们全部替换为第二个 URL 的图像，如此在。您可以让 populateImages 函数在要放置图像的位置获取索引。使用 eq 方法获取特定元素:

function populateImages(index, path) {
  $('.crush').eq(index).html('<img src="' + path + '"/>');
}

以循环计数器为索引调用函数:

populateImages(i, imgPath);