javascript - 使用 jQuery 将某个类的每个 div 从其父级的开头移动到结尾

Question

由于我们的系统开发人员之一的错误，我们系统中的一些 html 输出以错误的顺序输出。因此，作为系统的前端开发人员，我的任务是使用 JavaScript 对 html 输出进行临时修复，直到错误修复可以应用于我们的系统。

目前html输出如下:

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

有多个具有 formdetails 类的 div，每个 div 包含不同的表单元素。其中一些(就像本例一样)包含一个帮助 div，该 div 应该在表单字段后面显示一个可单击的问号，引导用户访问与该字段相关的相关帮助页面。正是这个 div.help 导致了问题，因为我们的开发人员出于某种原因将其包含在 .formdetails div 的开头，而它本应位于末尾。因此，我需要一个小的 jQuery 脚本来临时纠正此问题，以便每个 .help div 出现在其父级的末尾。

到目前为止，我已经尝试过以下方法:

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

任何帮助将不胜感激。

Answer 1

您可以使用:

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