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內的每兩個元素

回答

相關問題