div内のdivを条件付きでラップする

Question

divのような動的ページがこのように設定されています。ときどき各マップには、それに続く日付と時刻のdivがありますが、時には一部のマップだけが行います。私はクラスのマップラップとdivの各マップ、日付、および時間をラップするためにjQueryを使用しようとしています。

<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グループを選択するには、その後、

$(".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>