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

Question

I am using some jQuery to retrieve and parse some JSON from a third party website, so I can use images from that site to populate a gallery.

Please see the details below, and reproduced in 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> 

I know the part that's retrieving the JSON query is working because it is outputting the image path I want to grab in the console. However, the last part is using the jQuery .each function to add an tag and fill it with the path I have retrieved with the AJAX, but it's not working.

Not sure what I am doing wrong.

Please note that although the second part is in its own function called populateImages , I have tried embedding that code in the loop part, and still had the same effect.

Greatly appreciated if anyone can help.

Answer 1

You shouldn't use each for that, it only means that you will put an image in every element for the first URL, then replace all of them with an image for the second URL and so on. You can make the populateImages function take a index where you want to place the image. Use the eq method to get a specific element:

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

Call the function with the loop counter as index:

populateImages(i, imgPath);

Answer 2

Everytime the loop does an iteration, you are populating every .crush with the same image. This should work:

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

You can easily narrow down your selection with jQuery's 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 + '">');
             }
         }
     });
 });