Question

我目前正在使用Tumblr API并试图附加每篇帖子。我想保留与照片一起发布的标题和日期，以便我尝试使用clone（）方法。每次添加帖子时，它都会翻倍。所以第一个帖子是一张照片，第二张是同一张照片中的两张，第三张是同一张照片中的四张等。

这是HTML：

<section class='site-content'>
    <span class="fa fa-bars"></span>
        <div class="tumblr">
            <div class="blog_content">
                <div class="blog_text">
                    <p class="date"></p>
                    <p class="caption"></p>
                </div>
                <div class="blog_media">    
                    <img class="blog_photo" src="" />
                    <div class="blog_video">
                    </div>
                </div>
            </div>
        </div>      
</section>

这是一段代码：

for (var i = 0; i < 10; i++) {

    var type = results.response.posts[i].type;

    if (type === 'photo') {
    var photo = $('.blog_content').clone(); 
    photo.find('.caption').html(results.response.posts[i].caption); 
    photo.find('.date').text(results.response.posts[i].date);
    photo.find('.blog_photo').attr('src', results.response.posts[i].photos[0].original_size.url);
    $('.tumblr').append(photo);
    }

任何人都可以找到我犯错的地方吗？

Answer 1

您在循环中重复运行$('.blog_content').clone()，每次运行时都选择$('.blog_content')，.clone()将返回所有选定元素的数组。

由于此克隆集随后被追加，因此选择器将克隆2，然后4，...直到for循环终止，因为这是选择器时DOM的结构方式跑了。

您需要在循环外缓存克隆DOM元素的值，或者使您的选择器更具体，一次只返回一个元素。

Answer 2

使用.first()获取.blog_content类型中的第一个并将其克隆

var photo =$('.blog_content').first().clone();

Answer 3

试试这个

$('.blog_content').first().clone();

每次附加时，jQuery clone（）都会加倍div

3 个答案: