Оберните каждые 2 разных элемента внутри спецификаций c div с классом-оберткой - PullRequest
Новая
       43

Оберните каждые 2 разных элемента внутри спецификаций c div с классом-оберткой

0 голосов
/ 13 апреля 2020

Я пытаюсь обернуть каждые два элемента своим собственным 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>

И я хочу go получить: 

<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>

Проблема в том, что есть два разных элемента label и input, и я могу добавь туда класс. Если бы были только входы, я мог бы использовать jQuery wrapAll. Но я не знаю, как полностью обернуть два разных элемента html с jQuery.

1 Ответ

3 голосов
/ 13 апреля 2020

Этот код работает как чемпион: 

<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 для l oop через каждый элемент input, затем добавляет следующий элемент: label к нему, а затем вызовите .wrapAll, чтобы обернуть их обоих вместе с элементом div.

...