我是否不正确地使用jQuery .each函数？

Question

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

请参阅下面的详细信息，并在这个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

您可以轻松地使用jQuery的eq()缩小选择范围。

http://jsfiddle.net/BramVanroy/rzg64bvh/6/

 $(document).ready(function () {
     $.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);
                 $('.crush').eq(i).html('<img src="' + imgPath + '">');
             }
         }
     });
 });

Answer 2

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

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

用循环计数器作为索引调用函数：

populateImages(i, imgPath);

Answer 3

每次循环执行迭代时，您都会使用相同的映像填充每个.crush。这应该是可行的：

 $(document).ready(function(){
     var crushes = $('.crush');

     $.ajax({
         url:'http://tubecrush.net/wp_api/v1/posts?callback=show',
         dataType:"jsonp",
         type:"get",
         success:function(data){
             var regex = /"/g;
             var i = 0, l = crushes.length;
             for(i=0;i<l;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);
                 crushes.eq(i).html('<img src="' + imgPath + '"/>');
             } 
         }
     });
 });