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>

但我想要的是在第一篇文章结构应该是图像然后摘录，第二篇文章应该是摘录和再次形象第三个帖子sholud是形象然后再次超越第四篇文章应该是摘录和再次形象等等......

所以渲染的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

$。AJAX（{ 类型：'GET'， url：rootURL， dataType：'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);
        }

    });

Answer 2

而非append()使用after()或insertAfter()。你可以在你的阵列上构建你的html格式。

应该是。

jQuery（'。posts'）。after（'your html'）;

有关详细信息，请参阅此link

是否可以使用jQuery一个接一个地更改div顺序？

2 个答案: