将标签和输入包装在同一个 div 中

Posted 2023-05-09

【中文标题】将标签和输入包装在同一个 div 中

【英文标题】：wrap label and input in same div

【发布时间】：2014-07-31 07:51:15

【问题描述】：

我正在尝试将我的 radio 输入及其 label 包装在一个 div 中，但不知何故它不仅仅包装了输入。我的代码是：

html 是：

<div class="payment_processor-section">
    <input id="input_0" class="form-radio" type="radio" checked="checked"  name="payment_processor" value="1">
    <label for="input_0">Credit Card</label>
    <input id="input_1" class="form-radio" type="radio" name="payment_processor" value="0">
    <label for="input_1" style="">I will send payment by check</label>
</div>

我正在尝试的 Jquery 是：

$('.payment_processor-section input').map(function(index)
    $(this, $("label[for='"+this.id+"']") ).wrapAll('<div class="abc">');
);

请帮忙。

【参考方案1】：

试试这个：

$('.payment_processor-section input').map(function(index)
  $(this).next().andSelf().wrapAll('<div class="abc">');
);

fiddle

【讨论】：

哦，也许是因为多余的选择器，如果您删除 $("label[for='"+this.id+"']") 并留下 $(this)，那就完美了

【参考方案2】：

或http://jsfiddle.net/43jdq/

$('.payment_processor-section input').map(function(index)
 $(this).add($("label[for='"+this.id+"']")).wrapAll('<div class="abc">');
);

【参考方案3】：

由于 javascript 和 jQuery 有多种方法可以实现相同的结果，您还可以使用 slice 和 for in 循环

var collection=$('.payment_processor-section *')
for(var i = 0; i < collection.length; i+=2) 
      collection.slice(i, i+2).wrapAll("<div class='group'></div>");

【参考方案4】：

更新 jQuery v3.0 的 @Alex Char 解决方案

$('.payment_processor-section input').map(function(index)
  $(this).next().addBack().wrapAll('<div class="abc">');
);

.andSelf() 已在 v1.8 中弃用并在 v3.0 中删除，您可以改用.addBack()。