如何使用jQuery将元素拆分到单独的div中

Question

我试图将复选框与其标签分开并包装在div标签中 像这样但我无法得到这个。
我尝试过 HERE

我的HTML是：

<div class="modal-body">                 
            <p><input type="checkbox" name="anyBusinessSector" value="true" id="anyBusinessSector">
<input type="hidden" id="__checkbox_anyBusinessSector" name="__checkbox_anyBusinessSector" value="true"> Any</p>
 <p>
    <input type="checkbox" name="categoryIds" value="1" id="categoryIds-1">
<label for="categoryIds-1" class="checkboxLabel">Animal husbandry</label>
<br>
<input type="checkbox" name="categoryIds" value="2" id="categoryIds-2">
<label for="categoryIds-2" class="checkboxLabel">Apparels</label>
<br>
<input type="checkbox" name="categoryIds" value="3" id="categoryIds-3">
<label for="categoryIds-3" class="checkboxLabel">Business Services - I</label>
<br>
<input type="checkbox" name="categoryIds" value="4" id="categoryIds-4">
<label for="categoryIds-4" class="checkboxLabel">Agro Based Businesses</label>
<br>
<input type="checkbox" name="categoryIds" value="5" id="categoryIds-5">
<label for="categoryIds-5" class="checkboxLabel">Business Services - II</label>
<br>
<input type="checkbox" name="categoryIds" value="6" id="categoryIds-6">
<label for="categoryIds-6" class="checkboxLabel">Construction Related Activities</label>
<br>
<input type="checkbox" name="categoryIds" value="7" id="categoryIds-7">
<label for="categoryIds-7" class="checkboxLabel">Dairy Farming</label>
<br>
<input type="checkbox" name="categoryIds" value="8" id="categoryIds-8">
<label for="categoryIds-8" class="checkboxLabel">Eateries</label>
<br>
<input type="checkbox" name="categoryIds" value="9" id="categoryIds-9">
<label for="categoryIds-9" class="checkboxLabel">Farming/ Agriculture</label>
<br>
<input type="checkbox" name="categoryIds" value="10" id="categoryIds-10">
<label for="categoryIds-10" class="checkboxLabel">Flower Business</label>
<br>
<input type="checkbox" name="categoryIds" value="11" id="categoryIds-11">
<label for="categoryIds-11" class="checkboxLabel">Handicrafts</label>
<br>
<input type="checkbox" name="categoryIds" value="12" id="categoryIds-12">
<label for="categoryIds-12" class="checkboxLabel">Home Improvement</label>
<br>
<input type="checkbox" name="categoryIds" value="13" id="categoryIds-13">
<label for="categoryIds-13" class="checkboxLabel">Meat Businesses</label>
<br>
<input type="checkbox" name="categoryIds" value="14" id="categoryIds-14">
<label for="categoryIds-14" class="checkboxLabel">Miscellaneous</label>
<br>
<input type="checkbox" name="categoryIds" value="15" id="categoryIds-15">
<label for="categoryIds-15" class="checkboxLabel">Repair Services</label>
<br>
<input type="checkbox" name="categoryIds" value="17" id="categoryIds-16">
<label for="categoryIds-16" class="checkboxLabel">Transportation Services</label>
<br>
<input type="checkbox" name="categoryIds" value="16" id="categoryIds-17">
<label for="categoryIds-17" class="checkboxLabel">Tobacco Related Activities</label>
<br>
<input type="checkbox" name="categoryIds" value="19" id="categoryIds-18">
<label for="categoryIds-18" class="checkboxLabel">Education Loan</label>
<br>
<input type="checkbox" name="categoryIds" value="18" id="categoryIds-19">
<label for="categoryIds-19" class="checkboxLabel">Others</label>
<br>
</p>
</div>

这是我的脚本

$('.modal-body input[type="checkbox"]:nth-child(8n+8)').each(function(){
    $(this).prevAll('input[type="checkbox"]').addBack().wrapAll('<div/>'); 
});

Answer 1

我建议使用.slice()方法和旧for循环，以下代码将非常.next()兄弟label元素添加到切片集合中，然后{{1匹配元素：

.wrapAll()

http://jsfiddle.net/5mLN9/

如果您要将// Caching chekboxes and excluding the first one var $elems = $('.modal-body input[type="checkbox"]').not(':first'), $set; for ( i = 0; i < $elems.length; i+=7 ) { $set = $elems.slice(i, i+7); // Adding next label elements to the set $set.add($set.next('label')).wrapAll('<div/>'); } 和label标记添加到集合中：

br

http://jsfiddle.net/GxtLS/

Answer 2

如下：

$('.modal-body input[type="checkbox"]').each(function () {
    newWrapped = $("<div>");

    newWrapped.append( $(this).clone() );
    newWrapped.append( $(this).next().clone() );

    $(this).next().remove();
    $(this).remove();

    $('.modal-body').append(newWrapped);
});

$('.modal-body br').remove();

JSFiddle：http://jsfiddle.net/uUCZF/