Javascript 可以使用jQuery一个接一个地更改div顺序吗？

我不知道如何问这个问题，是否使用正确的措辞

我有这个包装

<div class="posts">

</div>

我使用下面的jQuery将两个div追加到这个函数中

$.ajax({
        type: 'GET',
        url: rootURL,
        dataType: 'json',
        success: function(data){

            $.each(data, function(index, value) {
                    jQuery('.posts').append('<div class="post_entry">
                    <div class="post_thumb">
                        <img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
                    </div>
                    <div class="post_details">
                        <p>' + value.excerpt.rendered + '</p>
                    </div>
                    </div>');
                });
            },
            error: function(error){
                console.log(error);
            }

        });

$.ajax({
键入：“GET”，
url:rootURL，
数据类型：“json”，
成功：功能（数据）{
$.each（数据、函数（索引、值）{
jQuery（'.posts'）.append（'
“+value.extracpt.rendered+”

');
});
},
错误：函数（错误）{
console.log（错误）；
}
});

因此，这将以如下方式呈现HTML

<div class="posts">
    <div class="post_entry"> <!-- this will be repeated till how many posts have in the loop-->
        <div class="post_thumb">
            <img width="100%" src="image.jpg" alt="" title="" />
        </div>
        <div class="post_details">
            <p>excerpt</p>
        </div>
    </div>
</div>

摘录

但我想要的是 在第一个后结构中，应该是图像，然后是摘录， 第二篇文章应该是摘录和图片，然后再重复一遍 第三个帖子是形象，然后又是例外 第四篇文章应该是摘录和图像，然后再等等

因此，呈现的HTML应该如下所示：

<div class="posts">
    <div class="post_entry"> 
        <div class="post_thumb">
            <img width="100%" src="image1.jpg" alt="" title="" />
        </div>
        <div class="post_details">
            <p>excerpt1</p>
        </div>
    </div>
</div>

<div class="posts">
    <div class="post_entry"> 
        <div class="post_details">
            <p>excerpt2</p>
        </div>
        <div class="post_thumb">
            <img width="100%" src="image2.jpg" alt="" title="" />
        </div>

    </div>
</div>

<div class="posts">
    <div class="post_entry"> 
        <div class="post_thumb">
            <img width="100%" src="image3.jpg" alt="" title="" />
        </div>
        <div class="post_details">
            <p>excerpt3</p>
        </div>
    </div>
</div>

<div class="posts">
    <div class="post_entry"> 
        <div class="post_details">
            <p>excerpt4</p>
        </div>
        <div class="post_thumb">
            <img width="100%" src="image4.jpg" alt="" title="" />
        </div>
    </div>
</div>

摘录1

摘录2

摘录3

摘录4

等等

有可能得到这个吗？

使用

after（）

或

insertAfter（）代替
append（）
。您可以基于数组构建html格式

应该是。

jQuery（'.posts'）。在（'your html'）之后

有关更多信息，请参阅此
$.ajax({
键入：“GET”，
url:rootURL，
数据类型：“json”，
成功：功能（数据）{

$。每个（数据、函数（索引、值）{
如果（索引%2==0）{
jQuery（'.posts'）.append（'
“+value.extracpt.rendered+”

');
}否则{
jQuery（'.posts'）.append（'
“+value.extracpt.rendered+”

');
}   
});
},
错误：函数（错误）{
console.log（错误）；
}
});
那么你收到的帖子有固定数量这样的吗？没有。。我每天都会添加帖子。。所以不能限制帖子的数量..好。。因此，对于每个第一和第四个div元素，您都希望更改元素被追加的方式，即第一个和第三个或第二个和第四个。。这意味着第1个和第3个HTML应该相同，第2个和第4个HTML结构应该相同。。
        $.each(data, function(index, value) {
            if(index % 2 == 0){
                jQuery('.posts').append('<div class="post_entry">
                <div class="post_thumb">
                    <img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
                </div>
                <div class="post_details">
                    <p>' + value.excerpt.rendered + '</p>
                </div>
                </div>');
            }else{
                jQuery('.posts').append('<div class="post_entry">
                <div class="post_details">
                    <p>' + value.excerpt.rendered + '</p>
                </div>
                <div class="post_thumb">
                    <img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
                </div>
                </div>');
            }   
            });
        },
        error: function(error){
            console.log(error);
        }

    });