0

Нужен скрипт, который обертывает в блок каждые два элемента определенного класса. Написал скрипт $(".string_block:not(.row):lt(2)").wrapAll("<div class='row'></div>"); только он обертывает первые два. Кто знает как можно переделать, чтобы он обертывал каждые 2 элемента с классом .string_block

Сейчас так

<div class="reviews">
    <div class="string_block">1</div>
    <div class="string_block">2</div>
    <div class="string_block">3</div>
    <div class="string_block">4</div>
    <div class="string_block">5</div>
    <div class="string_block">6</div>
</div>

Нужно так

<div class="reviews">
    <div class="row">
       <div class="string_block">1</div>
       <div class="string_block">2</div>
    </div>

    <div class="row">
       <div class="string_block">3</div>
       <div class="string_block">4</div>
    </div>

    <div class="row">
       <div class="string_block">5</div>
       <div class="string_block">6</div>
    </div>
</div>
2
  • Приведите пример разметки, а то не совсем понятно
    – Arendach
    6 дек 2019 в 19:51
  • @Arendach обновил 6 дек 2019 в 20:15

2 ответа 2

4

function wrapper(selector, count, wrapper) {
  // получаем все элементы по переданному селектору
  let elements = $(selector)

  // сгупированные элементы
  let groups = []

  // перебираем все элементы
  while (elements.length)
    // наполняем массив по count элементов
    groups.push(elements.splice(0, count))

  // перебираем все группы и оборачиваем
  for (group of groups)
    $(group).wrapAll(wrapper)
}

// первым параметром передаем селектор которые надо сгрупировать и обернуть
// второй параметр по сколько элементов будет в кажой групе
// третий параметр, то во что обворачиваем
wrapper('.block:not(.row)', 2, '<div class="row"></div>')
.row {
  margin-bottom: 5px;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>

4

let $stringBlocks = $('.string_block');

for(let i = 0; i < $stringBlocks.length; i += 2) {
  $stringBlocks.slice(i, i + 2).wrapAll("<div class='row'></div>");
}
.row{border:1px solid grey}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reviews">
    <div class="string_block">string_block 1</div>
    <div class="string_block">string_block 2</div>
    <div class="string_block">string_block 3</div>
    <div class="string_block">string_block 4</div>
    <div class="string_block">string_block 5</div>
    <div class="string_block">string_block 6</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.