To achieve this, you can use the wrapAll function.
Simply: $(".button-column").wrapAll("<div class='button-row'></div>");
`
Solution 1 :
Solution 2 :
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>Problem :
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>Comments
Comment posted by Wrap 3 divs in one with jQuery
Does this answer your question?
Comment posted by BlueDogRanch
@HereticMonkey It mostly does, but I added more markup for an example.
Comment posted by BlueDogRanch
Thanks! You beat Rory by one minute.
Comment posted by BlueDogRanch
Thanks! A more complete answer, but John beat you by a minute.