jQuery的 - 包裹一个div内的每两个元素

我有以下的jQuery： -jQuery的 - 包裹一个div内的每两个元素

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>

0两个图像

任何想法？

来源

2016-02-26 nsilva

尝试重写你的逻辑就是这样，

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

如果你使用上面1.8 jQuery的版本不使用.size()。由于它已被弃用。使用.length代替

来源

2016-02-26 13:13:17

@wolf感谢您纠正错字。 –

这很快，真棒作品像一个魅力:) – nsilva

@nsilva很高兴帮助！ :) –

jQuery的 - 包裹一个div内的每两个元素

回答

相关问题