jQuery-在div中包装每两个元素

Question

我有以下jQuery：-

var userFeed = new Instafeed({
    get: 'user',
    userId: 'XXXXXXXX',
    accessToken: 'XXXXXXXXXXXXXXXXXX',
    template: '',
    resolution: 'standard_resolution',
    limit: 20,
    sortBy: 'most-recent',
    after: function() {
        $('#instafeed > div:nth-child(1)').addClass('active');
    },
    success: function(data) {
        $('#instafeed > div:nth-child(1)').addClass('active');
        $('.carousel').carousel({interval:3000});
        for (var i = 0; i < $(data.data).size(); i++) {
            $('.carousel-inner').append('<div class="item"></div>');
            $('.item').append('<img class="img-insta" src='+data.data[i].images.standard_resolution.url+'>');
        }
    }
});
userFeed.run();

此刻的输出是：

<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
</div>
<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
</div>
<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
</div>
<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
</div>

我要实现的是：

<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
</div>
<div class="item">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838423_1391175941177184_1399748988_n.jpg?ig_cache_key=ODgwMzgxNzMwMjgwNTA1MzE0.2">
    <img class="img-insta" src="https://scontent.cdninstagram.com/t51.2885-15/e15/10838931_1585587768341057_2123046132_n.jpg?ig_cache_key=ODY4NzA0NDk3ODQxMjc0ODA4.2">
</div>

因此，它将两个图像包装在<div class="item"></div>

有任何想法吗？

Answer 1

尝试像这样重写您的逻辑，

var car=$('.carousel-inner'), itm;
for (var i = 0; i < $(data.data).length; i++) {
  if(i%2==0){
   itm = $('<div class="item"></div>');
   car.append(itm);
  }
  itm.append('<img class="img-insta" src='+data.data[i].images.standard_resolution.url+'>');
}

而且，如果您使用的jQuery版本高于1.8 ，则不要使用.size() 。 由于已弃用。 使用.length代替