javascript - jquery将复选框和标签包装在div中

Question

我创建了一个 wordpress 插件来创建联系表。如果我创建多个复选框，它看起来像下面的代码：

<input class="newch" name="chkbox[]" value="Product Specifcation" type="checkbox">
 Product Specifcation<br>

 <input class="newch" name="chkbox[]" value="Country Of origin" type="checkbox">
 Country Of origin<br>

 <input class="newch" name="chkbox[]" value="Minimum Order quantity" type="checkbox">
 Minimum Order quantity<br>

 <input class="newch" name="chkbox[]" value="Prouduct Warranty" type="checkbox">
 Prouduct Warranty<br>

 <input class="newch" name="chkbox[]" value="Unit Price" type="checkbox">
  Unit Price<br>

现在我想包装每个复选框，并将它的标签添加到 div中

  <div class="chk-bx">
 <input class="newch" name="chkbox[]" value="Unit Price" type="checkbox">
  Unit Price<br>
  </div>


  <div class="chk-bx">
 <input class="newch" name="chkbox[]" value="Prouduct Warranty" type="checkbox">
 Prouduct Warranty<br>
  </div>


 <div class="chk-bx">
 <input class="newch" name="chkbox[]" value="Country Of origin" type="checkbox">
 Country Of origin<br>

  </div>

怎么做？

Answer 1

尝试

$('.newch').each(function () {
    var $this = $(this);
    $this.add(this.nextSibling).add($this.next()).wrapAll('<div class="chk-bx"/>')
})

演示：小提琴