Move element to the end of parent element

Question

I have the following HTML in my application:

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

    <div class="work-item">
        <div class="text-container">                
        </div>
        <div class="image-container">                
        </div>
    </div>

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

    <div class="work-item">
        <div class="text-container">                
        </div>
        <div class="image-container">                
        </div>
    </div>

I'd like to take any element that has class text-container , and if it's the first element under work-item , move it after the div with class image-container , so that every div element looks like

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

I tried just removing it first with this:

$(".work-item .text-container:first-child").remove();

And that worked fine, but when I tried to move it with this, it didn't work at all, nothing happened:

$("#work .work-item .text-container:first-child").insertAfter($(this).parent()["last-child"]);

Anyone know what I'm doing wrong here?

Answer 1

you can use this:

 $('.text-container').each(function(index, item) { var $this = $(item); $this.appendTo($this.parent()); }); 

 .work-item{ margin:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="work-item"> <div class="image-container">img </div> <div class="text-container">txt </div> </div> <div class="work-item"> <div class="text-container">txt </div> <div class="image-container">img </div> </div> <div class="work-item"> <div class="image-container">img </div> <div class="text-container">txt </div> </div> <div class="work-item"> <div class="text-container">txt </div> <div class="image-container">img </div> </div> 

Answer 2

Try it this way, where you save the parent element as a variable

var theParent = $(".work-item .text-container:first-child").parent();

$(".work-item .text-container:first-child").detach().appendTo(theParent);

and then use detach instead of remove, so that it still saves the info in memory, and then append it to the parent.

Answer 3

just use insertAfter can achieve your purpose.
This is my JSFiddle.

var text = $('.text-container');
var img = $('.image-container');
text.insertAfter(img);

Answer 4

try

$(".work-item .text-container:nth-child(1)").each(function () {
    var elm = $(this);
    if (elm.next().is($(".image-container"))) {
         var parent = elm.parent();
         parent.append(elm.detach());
    }

});

DEMO

Answer 5

Because, The first element may be “.text-container” or ".image-container".

If the first element is ".image-container".

$("#work .work-item .text-container:first-child").length == 0;

So you get the first element is not correct.

This is my:

 $(document).ready(function() { var workItems = $(".work-item"); var len = workItems.length,i = 0,el,first; for(;i < len; i++){ el = workItems[i]; first = $(el).children().first(); if (first.hasClass("text-container")){ $(el).append(first); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="work-item"> <div class="image-container">img </div> <div class="text-container">txt </div> </div> <div class="work-item"> <div class="text-container">txt </div> <div class="image-container">img </div> </div> <div class="work-item"> <div class="image-container">img </div> <div class="text-container">txt </div> </div> <div class="work-item"> <div class="text-container">txt </div> <div class="image-container">img </div> </div>