CODEWITHSUNDEEP
javascriptjqueryhtmldom
jezzipin
jezzipin

Reputation: 4254

Move each div of a certain class from the start to the end of it's parent using jQuery

Due to an error by one of our system developers, some of the html output in our system is being output in the wrong order. As the front end developer for the system I am therefore tasked with implementing a temporary fix to the html output using javascript until a bugfix can be applied to our system.

Currently the html output is as follows:

 <div class="formdetails p_9 ">
    <div class="help">
        <a class="icamsPopup" onclick="popUp(this.getAttribute('href')); return false;" href="#">?</a>
    </div>
    <div class="no_mandatory_marker"></div>
    <div class="label">
        <label for="p_9" id="p_9ErrorMessage">Mobile Phone</label>
    </div>
    <div class="detail" id="ext-gen16">
       <input type="text" class="textfield x-form-text x-form-field" id="p_9" maxlength="20" size="100" name="p_9" style="width: 174px;">
    </div>
 </div>

There are multiple divs with the class of formdetails each containing a different form element. Some of them, as is the case with this one, contain a help div which should display a clickable question mark after the form fields that directs the user to the relevant help page relating to that field. It is this div.help that is causing the issue as our developer for some reason included this at the start of the .formdetails div when it should be at the end. I therefore need a small jQuery script to temporarily correct this issue so that each .help div appears at the end of it's parent.

So far I have tried the following:

/* Force help market to appear at the end of fields */
jQuery(".formdetails .help").each(function(){
  jQuery(this).insertAfter(jQuery(this).parent(".formdetails div:last");
})

Any help would be greatly appreciated.

Upvotes: 0

Views: 70

Answers (3)

JosephC
JosephC

Reputation: 166

You can also do : 

jQuery(".formdetails .help").each(function() {
    $(this).parent().append($(this));
});

fiddle: link

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

jQuery(".formdetails").append(function () {
    return $(this).find('.help')
});

Demo: Fiddle

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

You can use:

jQuery(".formdetails .help").each(function() {
    $(this).appendTo($(this).closest('.formdetails'));
});

Upvotes: 2

Related Questions