如何使用wrap()来wrap()两个嵌套的div？

Question

如何使用wrap()下面的标记来包装两个已包装的 div？我使用这段代码来包装这些 div button-column：$(".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>