Question

我有一个动态页面，其中div设置如下。有时每张地图都会有一个日期和时间div，但有时只有一些。我正在尝试使用jQuery将每组map，date和time包装在带有map map-wrap的div中。

<div class="withmap">
   <div class="map"></div>
   <div class="map"></div>
   <div class="date"></div>
   <div class="time"></div>
   <div class="map"></div>
   <div class="map"></div>
   <div class="date"></div>
   <div class="time"></div>
   <div class="map"></div>
   <div class="map"></div>
</div>

期望的输出：

<div class="withmap">
   <div class="map"></div>
   <div class="map-wrap">
      <div class="map"></div>
      <div class="date"></div>
      <div class="time"></div>
   </div>
   <div class="map"></div>
   <div class="map-wrap">
      <div class="map"></div>
      <div class="date"></div>
      <div class="time"></div>
   </div>
   <div class="map"></div>
   <div class="map"></div>
</div>

我尝试了以下代码，但它无法正常工作。之前插入的div也有一个结束标记。

jQuery( " .date " ).prev().before(' <div class="map-wrap"> ');
jQuery( " .date " ).next().after(' </div> ');

非常感谢任何帮助！

Answer 1

您可以使用nextUntil和wrapAll来解决此问题：

jQuery(".map").each(function() {
  t = $(this).nextUntil('.map');
  if (t.length) {
    t = t.add(this)
    t.wrapAll('<div class="map-wrap">');
  }
})

.map {
  border: 1px solid red;
  margin: 10px;
  padding: 10px;
}
.map-wrap {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="withmap">
   <div class="map"></div>
   <div class="map"></div>
   <div class="date"></div>
   <div class="time"></div>
   <div class="map"></div>
   <div class="map"></div>
   <div class="date"></div>
   <div class="time"></div>
   <div class="map"></div>
   <div class="map"></div>
</div>

Answer 2

$('.map').each(function(index, map){
  //get all the elements after this map, until the next map, and include this map
  var $wrapMe = $(map).nextUntil('.map').add(map);
  
  //only one element(map) ?  ignore
  if ($wrapMe.length > 1) {
    var $wrapper = $('<div class="map-wrap">');
    //put the wrapper before this map
    $wrapper.insertBefore(map);
    //move the elements into the wrapper
    $wrapper.append($wrapMe);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="withmap">
  <div class="map"></div>
  <div class="map"></div>
  <div class="date"></div>
  <div class="time"></div>
  <div class="map"></div>
  <div class="map"></div>
  <div class="date"></div>
  <div class="time"></div>
  <div class="map"></div>
  <div class="map"></div>
</div>

Answer 3

您可以使用相邻的兄弟选择器+，.prevUntil()，.addBack()，.add()，.prev()来选择.map + .date + .time元素组，然后在集合上调用.wrapAll()

$(".map + .date + .time")
.each(function() {
  var prev = $(this).prevUntil(".map").addBack();
  prev.add(prev.prev(".map")).wrapAll("<div class=map-wrap>");
});

.map-wrap {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="withmap">
  <div class="map">map</div>
  <div class="map">map</div>
  <div class="date">date</div>
  <div class="time">time</div>
  <div class="map">map</div>
  <div class="map">map</div>
  <div class="date">date</div>
  <div class="time">time</div>
  <div class="map">map</div>
  <div class="map">map</div>
</div>

有条件地将div包装在div中

3 个答案: