我有下面的代码
<div class="wrapper-div">
<div class="div-1">
<form class="form-1">
<input class="input-1" />
</form>
</div>
<div class="div-2"></div>
</div>
我需要采用表单元素并包装div-1 和div-2,如下图所示
<div class="wrapper-div">
<form class="form-1">
<div class="div-1">
<input class="input-1" />
</div>
<div class="div-2"></div>
</form>
</div>
我无法编辑 html,所以可以通过 jquery 执行此操作吗?我尝试使用 wrap() 函数,但这创建了一个第二个表单元素,这不是我想要的。
非常感谢任何帮助
你可以
做类似的事情
$('.wrapper-div').each(function() {
var $frm = $(this).find('form');
$frm.contents().unwrap();
$(this).wrapInner($frm)
})
div,
form {
padding: 5px;
}
.wrapper-div {
border: 1px solid red;
}
form {
border: 1px solid green;
}
.div-1,
.div-2 {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper-div">
<div class="div-1">
<form class="form-1">
<input class="input-1" />
</form>
</div>
<div class="div-2"></div>
</div>
是的,这是可能的!只需在表单 1 中创建新元素,复制div-2 内容并将其粘贴到新元素中即可。然后,删除div-2。例:
var elem = document.getElementsByClassName('div-2')[0];
var elem_html = elem.innerHTML;
var new_elem = document.createElement("div"); //create element
new_elem.className = "div-2";
new_elem.innerHTML = elem_html; // set attributes and inner html
document.getElementsByClassName("form-1")[0].appendChild(new_elem); //copy it
elem.remove(); //remove the div
演示
演示 2(显示文档内部 html)
希望对:)有所帮助