用jquery包裝Wrap元素？

Question

我有一些

HTML

<input type="checkbox"> 

我需要得到具有複選框的所有元素和wrapp他們不同的是最終的HTML得到這樣

<label class="checkbox"><input type="checkbox"><i></i></label> 

這有可能只用jQuery ？

Answer 1

你可以做這樣的事情

$('input:checkbox').wrap('<label class="checkbox" />').after('<i />')

label.checkbox { 
 
    border: 1px solid red; 
 
} 
 
label.checkbox i { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    line-height: 10px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox">

Answer 2

HTML

<input type="checkbox"> 

CSS

$(':checkbox').wrapInner('<i></i>').wrapInner('<label class="checkbox"></label>') 

FIDDLE