Javascript 在每个特定标记后包装所有元素

我需要在每个

h4

标记后包装所有

div

s，以便根据结果修改列大小

原样：

<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>')
});

$（“h4.酒店区域”）。每个（功能（）{
$（this.nextAll（）.wrapAll（“”）
});

当我这样做的时候，它把我的HTML搞乱了。我没有访问html的权限，所以我需要这样做，一旦我包装，然后我将计算

description wrap

类中有多少div，但我无法包装

---

我考虑包装，因为我需要的是能够计算出每个h4之后剩余的col-md-6 col-sm-12 col-xs-12填充横幅的数量，如果结果是一个未配对的数字，则第一个col-md-6 col-sm-12 col-xs-12填充横幅将剩余col更改为col-md-12，而不知道col-md-6 col-sm-12 col-xs-12填充横幅是如何离开的在每个h4之后我将无法实现我的目标

您可以在每个h4之后添加一个

div.description-wrap

，在

.bannerPrincipales

内添加一个

div.description-wrap

。 然后，您可以在

.bannerPrincipales

内循环每个

div

，并说：

• 如果它有

  描述包装

  类，那么它将是

  包装

• 否则将其附加到

  包装器中

  （使用函数）

最后，您可以使用

length

属性计算

wrapper

中

div

s的数量

$（函数（）{
$（'.bannerPrincipales h4'）。在（''）之后；
设wrapper=null；
$（'.bannerPrincipales div'）。每个（（i，div）=>{
if（$（div）.hasClass（'description-wrap'））{
包装器=div；
}否则{
$（包装器）.append（div）；
}
});
$（'.bannerPrincipales.description wrap'）。每个（（i，wrapper）=>{
let place=$（'.bannerPrincipales h4:eq（'+i+'））.text（）；
设n=$（包装器）.find（'div'）.length；
log（place+'has'+n+'divs'）；
});
});
.description wrap{
颜色：红色；
}

蓬塔卡纳
A.
B
巴亚希贝
C
D
里维埃拉玛雅
E
F
G
包装这些div并不是解决此问题的好方法，因为包装div会破坏类
列-
样式设置的网格布局，因为它们不再是同级，并且大小将被破坏。您可以更好地描述您的目标。可能有一个更优雅的解决方案可用。这是将类添加到h4之后的每个div，但是如何计算每个h4之后还剩下多少col-md-6 col-sm-12 col-xs-12填充横幅。。例如，第一个4h有2个，第二个h4有3个on@walteralexander我已经用你的新要求更新了答案