在每个特定标签之后包装所有元素

Question

我需要在每个h4 标记之后包装所有divs，以便我可以根据结果修改列大小。

原样：

<div class="bannerPrincipales">
  <h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>

成为：

<div class="bannerPrincipales">
  <h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
  <div class="description-wrap">
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  </div>
  <h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
  <div class="description-wrap">
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  </div>
  <h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
  <div class="description-wrap">
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
    <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
  </div>
</div>

我尝试了什么：

$(" h4.hotels-area").each(function(){
  $(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});

当我这样做时，它弄乱了我的 HTML。我无法访问 html，所以我需要这样做，一旦我换行，我将计算 description-wrap 类中有多少 div，但我无法换行。

我考虑换行是因为我需要能够计算每个 h4 之后有多少 col-md-6 col-sm-12 col-xs-12 padding-banner-left 以及结果是否未配对编号第一个 col-md-6 col-sm-12 col-xs-12 padding-banner-left 我将 cols 更改为 col-md-12 而不知道 col-md-6 col-sm-12 col-xs -12 padding-banner-left 我在每个 h4 之后我将无法实现我的目标

Answer 1

您可以在.bannerPrincipales 内的每个h4 标记之后添加div.description-wrap（使用jQuery.after 函数）。 然后，您可以在.bannerPrincipales 中循环每个div，然后说：

• 如果它有description-wrap 类，那么它将是wrapper；
• 否则将其附加到 wrapper 中（使用 jQuery.append 函数）。

最后，您可以使用length 属性计算wrapper 中divs 的数量。

$(function () {
  $('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
  let wrapper = null;
  $('.bannerPrincipales div').each((i, div) => {
    if ($(div).hasClass('description-wrap')) {
      wrapper = div;
    } else {
      $(wrapper).append(div);
    }
  });
  $('.bannerPrincipales .description-wrap').each((i, wrapper) => {
    let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
    let n = $(wrapper).find('div').length;
    console.log(place + ' has ' + n + ' divs');
  });
});

.description-wrap {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
  <h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
  <h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
  <h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
  <div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>