如何包装()已添加wrap()的两个嵌套div

Question

如何在下面的标记上使用wrap()来包装两个已经包装的div？

我用这段代码用button-column:包装这些div

$(".simpay-form-control.simpay-radio-container").wrap("<div class='button-column'></div>");
$(".simpay-form-control.simpay-custom-amount-container").wrap("<div class='button-column'></div>");

然后，我需要将两个button-column封装在一个button-row中。使用此选项将每个按钮列包装在一个按钮行中，而不是两个按钮列都包含一个按钮列。

$(".button-column").wrap("<div class='button-row'></div>");

这是我需要做的标记和注释：

<form action="" method="post" class="simpay-checkout-form simpay-form-12345 simpay-styled simpay-checkout-form--embedded" id="simpay-form-12345" data-simpay-form-id="12345">
<div class="button-row"> <!-- I need to add this and the closing div below -->
<div class="button-column"> <!-- added by jQuery -->
<div class="simpay-form-control simpay-radio-container">
<!-- more markup -->
</div>
</div> <!-- added by jQuery -->
<div class="button-column"> <!-- added by jQuery -->
<div class="simpay-form-control simpay-custom-amount-container">
<!-- more markup -->
</div>
</div> <!-- added by jQuery -->
</div> <!-- I need to add this closing div for .button-row above -->

<!-- more markup -->
</form>

Answer 1

要实现这一点，可以使用wrapAll函数。

简单地说：$(".button-column").wrapAll("<div class='button-row'></div>")；`

Answer 2

调用wrap()添加.button-column元素后，调用wrapAll()将所有元素包装在.button-row:中

$('.simpay-form-control.simpay-radio-container').wrap('<div class="button-column" />');
$('.simpay-form-control.simpay-custom-amount-container').wrap('<div class="button-column" />');
$('.button-column').wrapAll('<div class="button-row" />');

.button-column {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
.button-row {
border: 1px solid #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="simpay-checkout-form simpay-form-12345
simpay-styled simpay-checkout-form--embedded" id="simpay-form-12345" data-simpay-form-id="12345">
<div class="simpay-form-control simpay-radio-container">Foo</div>
<div class="simpay-form-control simpay-custom-amount-container">Bar</div>
</form>