如何使用jQuery將元素拆分到單獨的div中

Question

我試圖用其標簽拆分復選框並包裝在div標簽中。
像這樣，但我做不到。
我在這里嘗試過

我的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元素添加到切片集合中，然后將.wrapAll()匹配元素添加：

// 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/>');
}

http://jsfiddle.net/5mLN9/

如果要將label和br標簽都添加到集合中：

$set.add($set.nextUntil('input')).wrapAll('<div/>');

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/