Как обернуть каждый вход и метку в один div, используя jquery

Это мой код, и я хочу заключить каждый из них в каждый вход и метку с помощью div

<div>
    <input type="checkbox" name="checkbox1">
    <label for="checkbox1">checkbox1</label>
    <input type="checkbox" name="checkbox2">
    <label for="checkbox2">checkbox2</label>
    <input type="checkbox" name="checkbox3">
    <label div="checkbox3">checkbox3</label>
    <input type="checkbox" name="checkbox4">
    <label for="checkbox4">checkbox4</label>
</div>

и я хочу заключить каждый вход и метку с div, как

<div>
  <div>
    <input type="checkbox" name="checkbox1">
    <label for="checkbox1">checkbox1</label>
  </div>
  <div>
    <input type="checkbox" name="checkbox2">
    <label for="checkbox2">checkbox2</label>
  </div>
  <div>
    <input type="checkbox" name="checkbox3">
    <label div="checkbox3">checkbox3</label>
  </div>
  <div>
    <input type="checkbox" name="checkbox4">
    <label for="checkbox4">checkbox4</label>
  </div>
</div>

Источник

3 ответа

Решение

Попробуй это

$('input').each(function() {
  $(this).next('label').andSelf().wrapAll('<div class="testing"/>');
});
.testing {
  background-color: blue;
}

.testing>label {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="checkbox1">
  <label for="checkbox1">checkbox1</label>
  <input type="checkbox" name="checkbox2">
  <label for="checkbox2">checkbox2</label>
  <input type="checkbox" name="checkbox3">
  <label div="checkbox3">checkbox3</label>
  <input type="checkbox" name="checkbox4">
  <label for="checkbox4">checkbox4</label>
</div>

Источник

Ты можешь использовать .map()

$('input').map(function(index){
  $(this).next().andSelf().wrapAll('<div>');
});

демонстрация

$('input').map(function(index){
  $(this).next().andSelf().wrapAll('<div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="checkbox" name="checkbox1">
    <label for="checkbox1">checkbox1</label>
    <input type="checkbox" name="checkbox2">
    <label for="checkbox2">checkbox2</label>
    <input type="checkbox" name="checkbox3">
    <label div="checkbox3">checkbox3</label>
    <input type="checkbox" name="checkbox4">
    <label for="checkbox4">checkbox4</label>
</div>

Источник

Ассоциировать оба input а также label с картой и выберите оба конкретных элемента и оберните их:

$('input').map(function() {
  $(this).next().andSelf().wrapAll('<div>');
});

JsFiddle

Источник
Другие вопросы по тегам