Jquery在标签中包装元素？答案

【问题标题】：Jquery wrapp element in label?Jquery在标签中包装元素？
【发布时间】：2015-02-16 22:15:05
【问题描述】：

我正在制作一些复选框样式，但 iCheck 与我的控件存在一些问题，因此我决定制作自己的 iCheck。我需要什么我有这个元素

<input type="checkbox" class="vvCheck">
<input type="radio" class="vvCheck">

使用 jquery，我不想做这样的事情

对于复选框

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

对于收音机

<label class="radio">
  <input type="radio" class="vvCheck">
  <i></i>
</label>

我可以在一个函数中做，像这样调用

vvCheck();

Txanks

这是工作小提琴 http://jsfiddle.net/yxwvn9at/

【问题讨论】：

标签： jquery append wrapper

【解决方案1】：

你可以像使用 .wrap() 一样

function vvCheck() {
  $('.vvCheck[type="checkbox"]').wrap('<label class="checkbox" />').after('<i />')
  $('.vvCheck[type="radio"]').wrap('<label class="radio" />').after('<i />')
}
vvCheck();

label.checkbox {
  border: 1px solid green;
}
label.checkbox i {
  height: 10px;
  display: inline-block;
  width: 10px;
  background: red;
}
label.radio {
  border: 1px solid blue;
}
label.radio i {
  height: 10px;
  display: inline-block;
  width: 10px;
  background: green;
}

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

【讨论】：

【解决方案2】：

试试这个：

function vvCheck() {
    var liInsideLabel = '<li></li>';
    var radioLabel = '<label class="radio"></label>';   
    var checkboxLabel = '<label class="radio"></label>';

    $('input[type=radio].vvCheck').each(function(){
      $(this).wrap(radioLabel).after(liInsideLabel);      
     });

    $('input[type=checkbox].vvCheck').each(function(){
      $(this).wrap(checkboxLabel).after(liInsideLabel);       
    });
}

JSFiddle DEMO

【讨论】：