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

时间:2016-02-26 13:09:34

标签: jquery

我有以下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>

之间包装了两个图像

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

尝试像这样重写你的逻辑,

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+'>');
}

如果您使用.size()以上的jquery版本,请不要使用1.8。因为它已被弃用。请改用.length