使用包装类将每 2 个不同的元素包装在特定的 div 中
Posted
技术标签:
【中文标题】使用包装类将每 2 个不同的元素包装在特定的 div 中【英文标题】：Wrap every 2 differents elements inside specific div with wrapper class 【发布时间】：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 产品页面。我从这个主题中找到了将选项字段转换为收音机的解决方案：***.com/questions/36219833/… 但 for 没有正确生成。仅适用于第一组收音机。 【参考方案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！以上是关于使用包装类将每 2 个不同的元素包装在特定的 div 中的主要内容，如果未能解决你的问题，请参考以下文章