CODEWITHSUNDEEP
jquery
Leon
Leon

Reputation: 1292

Changing the order of child divs inside main parent element

i have an <ul> that looks like this

<ul class="class_1 class_2">
    <li class="class1">
        <div class="submission_list_item">
            <div class="sub_list_item_content modal_link" href="url here">
                <div class="facebook_user" style="display:none;"></div>
                <div class="submission_response ">
                    <label></label>
                    <span class="MediaUploadResponse"><img alt="Sample_mpeg4" src="url here"></span> </div>
                <div class="submission_response name">
                    <label>NAME:</label>
                    <span class="Response"></span> </div>
                <div class="submission_response last_name">
                    <label>LAST NAME</label>
                    <span class="Response"></span> </div>
                <div class="submission_response description">
                    <label>DESCRIPTION:</label>
                    <span class="Response"> Test </span> </div>
                <div class="submission_response video_title">
                    <label>VIDEO TITLE:</label>
                    <span class="Response"> Video </span> </div>
            </div>
        </div>
    </li>
    <li class="class1">
        <div class="submission_list_item">
            <div class="sub_list_item_content modal_link" href="url here">
                <div class="facebook_user" style="display:none;"></div>
                <div class="submission_response ">
                    <label></label>
                    <span class="MediaUploadResponse"><img alt="Sample_mpeg4" src="url here"></span> </div>
                <div class="submission_response name">
                    <label>NAME:</label>
                    <span class="Response"></span> </div>
                <div class="submission_response last_name">
                    <label>LAST NAME</label>
                    <span class="Response"></span> </div>
                <div class="submission_response description">
                    <label>DESCRIPTION:</label>
                    <span class="Response"> Test </span> </div>
                <div class="submission_response video_title">
                    <label>VIDEO TITLE:</label>
                    <span class="Response"> Video </span> </div>
            </div>
        </div>
    </li>
</ul>

What i am trying to do is to swap the order of the 2 divs, name with title in every < li> item that is on my page. Tried .each on the < li>s but no luck. Any idea how to do that?

Upvotes: 2

Views: 4539

Answers (1)

thecodeparadox
thecodeparadox

Reputation: 87073

I think you need something like this:

$('ul.class_1 li.class1').each(function() {
  var name = $(this).find('div.name');
  var video_title = $(this).find('div.video_title');
  name.insertAfter($('div.description', this));
  video_title.insertBefore($('div.last_name', this));
});

DEMO

Upvotes: 3

Related Questions