How can I wrap() two nested divs that have been added with wrap()?

user_5853892 0
Viewed 89

How can use wrap() on the markup below to wrap two divs that are already wrapped?

I'm using this code to wrap those divs with 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>");

I then need to wrap both button-column in one button-row. Using this wraps each button-column in a button-row, not both button-column's with one button-row.

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

This is the markup and with notes on what I need to do:

<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>

html jquery javascript
2 Answers

To achieve this, you can use the wrapAll function.

Simply: $(".button-column").wrapAll("<div class='button-row'></div>"); `

user_81056430

Once you've called wrap() to add the .button-column elements, call wrapAll() to wrap all of those within .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>

user_5194130
Related