Условно обтекание divs в div

Question

У меня есть динамическая страница с настройками divs, подобными этому. Иногда каждая карта будет содержать дату и время div, но иногда это делают только некоторые. Я пытаюсь использовать jQuery для переноса каждого набора карт, даты и времени в div с помощью класса map-wrap.

<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>