如何使用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 {&nbsp; border: 1px solid #CCC;&nbsp; margin: 5px;&nbsp; padding: 5px;}.button-row {&nbsp; 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-12345simpay-styled simpay-checkout-form--embedded" id="simpay-form-12345" data-simpay-form-id="12345">&nbsp; <div class="simpay-form-control simpay-radio-container">Foo</div>&nbsp; <div class="simpay-form-control simpay-custom-amount-container">Bar</div></form>