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

Answer 2

尝试

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

演示：Fiddle

Answer 3

你也可以这样做：

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

小提琴：link

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

3 个答案: