用jquery包装元素？

Question

我有一些

HTML

<input type="checkbox">

我需要使用复选框获取所有元素并将它们包装起来，使得最终的html像这样

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

这只能用Jquery吗？

Answer 1

您可以执行类似

的操作

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML

<input type="checkbox">  

<强> CSS

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

FIDDLE