0

我正在尝试用我的自定义 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 元素。

4

1 回答 1

2

这段代码就像一个冠军：

<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 元素一起包装。

于 2020-04-12T22:22:25.580 回答