CODEWITHSUNDEEP
javascripthtmljquery
BlueDogRanch
BlueDogRanch

Reputation: 575

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

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>

Upvotes: 2

Views: 113

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

John Paul R
John Paul R

Reputation: 707

To achieve this, you can use the wrapAll function.

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

Upvotes: 2

Related Questions