是否可以使用 jQuery 一个接一个地更改 div 订单？

Question

我不确定如何问这个问题以及是否使用正确的措辞。

我有这个包装纸

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

        });

所以这会像这样渲染 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>

但我想要的是在第一个 post 结构中应该是图像，然后是摘录，第二个 post 应该是摘录和图像然后再第三个 post 应该是图像然后再提取第四个 post 应该是摘录和图像然后再等等...

所以呈现的 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>

等等..

有可能得到这个吗？

Answer 1

而不是 append() 使用 after() 或 insertAfter()。您可以根据数组构建 html 格式。

应该是。

jQuery('.posts').after('your html');

有关更多信息，请参阅此 link

Answer 2

$.ajax({ 类型：'GET'， url: 根网址, 数据类型：'json'，成功：函数（数据）{

        $.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);
        }

    });

是否可以使用 jQuery 一个接一个地更改 div 订单？

Is it possible to change a div order one after another using jQuery?

javascript

jquery

append

wrapper