使用包装类将每 2 个不同的元素包装在特定的 div 中答案

【问题标题】：Wrap every 2 differents elements inside specific div with wrapper class使用包装类将每 2 个不同的元素包装在特定的 div 中
【发布时间】：2020-07-25 11:28:48
【问题描述】：

我正在尝试用我的自定义 div 包装每两个元素。这是我的代码：

<div class="variation-radios">
    <input type="radio" name="attribute_pa" value="60-cm">
    <label for="60-cm">60 cm</label>
    <input type="radio" name="attribute_pa" value="70-cm">
    <label for="70-cm">70 cm</label>
    <input type="radio" name="attribute_pa" value="80-cm">
    <label for="80-cm">80 cm</label>
    <input type="radio" name="attribute_pa" value="90-cm">
    <label for="90-cm">90 cm</label>
</div>

我想去拿：

<div class="variation-radios">
    <div class="wrapper">
        <input type="radio" name="attribute_pa" value="60-cm">
        <label for="60-cm">60 cm</label>
    </div>

    <div class="wrapper">
        <input type="radio" name="attribute_pa" value="70-cm">
        <label for="70-cm">70 cm</label>
    </div>

    <div class="wrapper">
        <input type="radio" name="attribute_pa" value="80-cm">
        <label for="80-cm">80 cm</label>
    </div>

    <div class="wrapper">
        <input type="radio" name="attribute_pa" value="90-cm">
        <label for="90-cm">90 cm</label>
    </div>      
</div>

问题是 tehre 是两个不同的元素 label 和 input 我不能在那里添加一个类。如果只有输入，我可以使用 jQuery wrapAll。但我不知道如何用 jQuery 完全包装两个不同的 html 元素。

【问题讨论】：

我应该说标签中的 for="" 应该与相关输入的 id 匹配。您的输入应该有 id。标签应该说 for="(relevant id)"。那么 - 考虑一个将这对组合在一起的单个 jquery 选择器。
这就是我尝试使用包装器修复它的原因。因为它是 woocommerce 产品页面。我从这个主题中找到了将选项字段转换为收音机的解决方案：stackoverflow.com/questions/36219833/… 但 for 没有正确生成。仅适用于第一组收音机。

标签： javascript jquery html jquery-plugins wrapall

【解决方案1】：

这段代码就像一个冠军：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<div class="variation-radios">
    <input id="60-cm" type="radio" name="attribute_pa" value="60-cm">
    <label for="60-cm">60 cm</label>
    <input id="70-cm" type="radio" name="attribute_pa" value="70-cm">
    <label for="70-cm">70 cm</label>
    <input id="80-cm" type="radio" name="attribute_pa" value="80-cm">
    <label for="80-cm">80 cm</label>
    <input id="90-cm" type="radio" name="attribute_pa" value="90-cm">
    <label for="90-cm">90 cm</label>
</div>

<script>
$('input').each(function() {
  $(this).add($(this).next('label')).wrapAll('<div class="wrapper"></div>')
});
</script>

它使用.each方法循环遍历每个input元素，然后添加下一个元素：label，然后调用.wrapAll将它们与div元素一起包装。

【讨论】：

感谢 Yishmeray！