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

I am not sure how to ask this and using correct wording or not.

I have this wrapper

<div class="posts">

</div>

And I am appending two divs inside this using following jQuery.

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

        });

so this will render the HTML like this.

<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>

But what I want is in first post structur should be image thenn excerpt, second post should be excerpt and image then again third post sholud be image then excert then again fourth post should be excerpt and image then again and so on...

so the rendered HTML shuould be like:

<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>

and so on..

Is it possible to get this?

Answers 1

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

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

Related Articles