I'm using
jQuery( ".quantity" ).wrap( "<div class=\"engrave_button\"></div>" )
to wrap the quantity div with the engrave_button div.
But I need to include the button inside the engrave_button div. How can I do that?
Current HTML:
<form>
....
<div class="engrave_button">
<div class="quantity">
<input type="number" id="quantity_" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
</div>
</div> // closing engrave_button div
<button type="submit" name="add-to-cart" value="123456" class="single_add_to_cart_button button alt">Add to cart</button>
</form>
Needed HTML:
<form>
....
<div class="engrave_button">
<div class="quantity">
<input type="number" id="quantity_" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
</div>
<button type="submit" name="add-to-cart" value="123456" class="single_add_to_cart_button button alt">Add to cart</button>
</div> // move closing engrave_button div here
</form>
CodePudding user response：
You can use wrapAll(), pass all the element selectors you want to wrap inside the function
jQuery(".quantity, .single_add_to_cart_button").wrapAll("<div class=\"engrave_button\"></div>")
Working Code
jQuery(".quantity, .single_add_to_cart_button").wrapAll("<div class=\"engrave_button\"></div>")<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="engrave_button">
<div class="quantity">
<input type="number" id="quantity_" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
</div>
</div> // closing engrave_button div
<button type="submit" name="add-to-cart" value="123456" class="single_add_to_cart_button button alt">Add to cart</button>CodePudding user response：
While you've already accepted an answer I thought I'd offer an alternative approach; given your posted HTML it's relatively simple to bring the <button> element inside of the div.quantity element in both jQuery and JavaScript.
First, jQuery:
// selecting the element(s), and then chaining the
// append() method, using its anonymous function:
$('div.engrave_button').append(function() {
// returning the the next <button> element (if any)
// to the append() method, which will append to the
// current '$(this)':
return $(this).next('button');
});
// showing the updated HTML of the <form> element for
// easy reference:
$('#result').text(function() {
return $('form').prop('outerHTML');
});*,
::before,
::after {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}
.engrave_button {
border: 1px solid silver;
}
#result {
white-space: pre-wrap;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="engrave_button">
<div class="quantity">
<input type="number" id="quantity_" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
</div>
</div>
<!-- closing engrave_button div -->
<button type="submit" name="add-to-cart" value="123456" class="single_add_to_cart_button button alt">Add to cart</button>
</form>
<div id="result"></div>And in JavaScript:
// retrieve a NodeList of all elements matching the CSS selector:
const engrave_button_divs = document.querySelectorAll('div.engrave_button');
// iterate over the NodeList of elements using NodeList.prototype.forEach(),
// along with an Arrow function:
engrave_button_divs.forEach((element) => {
// 'element' is a reference to the current Node of the NodeList over
// which we're iterating (this variable can be assigned any name you
// prefer).
// Here we retrieve the nextElementSibling of the current element:
let nextElement = element.nextElementSibling,
// here we check that the nextElement is a <button>, using
// the element.matches() method:
nextElementIsButton = nextElement.matches('button');
// if that nextElement is a <button>:
if (nextElementIsButton) {
// we use the Element.append() method to append that <button> to
// the current (the div.engrave) element:
element.append(nextElement);
}
});
document.querySelector('#result').innerText = document.querySelector('form').outerHTML;*,
::before,
::after {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}
.engrave_button {
border: 1px solid silver;
}
#result {
white-space: pre-wrap;
}<form>
<div class="engrave_button">
<div class="quantity">
<input type="number" id="quantity_" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
</div>
</div>
<!-- closing engrave_button div -->
<button type="submit" name="add-to-cart" value="123456" class="single_add_to_cart_button button alt">Add to cart</button>
</form>
<div id="result"></div>References:
- JavaScript:
- jQuery: