时间戳

首页 > 解决方案 > 如何 wrap() 两个使用 wrap() 添加的嵌套 div？

javascript - 如何 wrap() 两个使用 wrap() 添加的嵌套 div？

问题描述

如何使用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>

标签： javascripthtmljquery

解决方案

为此，您可以使用wrapAll函数。

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

推荐阅读