我是否正确使用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

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

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

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

populateImages(i, imgPath);

Answer 2

每次循环执行一次迭代时， .crush在每个.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 + '"/>');
             } 
         }
     });
 });

Answer 3

您可以使用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 + '">');
             }
         }
     });
 });