jQuery .wrap()相邻按钮HTML

Question

我用

jQuery( ".quantity" ).wrap( "<div class="engrave_button"></div>" )

将quantitydiv与engrave_buttondiv分隔。

但我需要包括button在engrave_buttondiv。我怎么能做到这一点?

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

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

Answer 1

您可以使用wrapAll()，传递您想要在函数

中包装的所有元素选择器

jQuery(".quantity, .single_add_to_cart_button").wrapAll("<div class="engrave_button"></div>")

---

工作代码

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>

Answer 2

既然你已经接受了一个答案，我想我应该提供一个替代方法;在jQuery和JavaScript中，将<button>元素放入div.quantity元素中相对简单。

首先,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>

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

引用:

• JavaScript:
  • 箭头功能。
  • document.querySelector().
  • document.querySelectorAll().
  • Element.append().
  • Element.outerHTML.
  • NodeList.prototype.forEach().
  • Node.textContent.
• jQuery:
  • append().
  • next().
  • prop().
  • text().