如何使用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要素向切片集合，然後.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標籤s到集合：

$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/