如何包裝所有相鄰並具有相同類的元素？

我想知道如何包裝所有相鄰並具有相同類的元素。由於它將段落推到底部，wrapAll（）不起作用。如何包裝所有相鄰並具有相同類的元素？

源

<div class="container"> 
    <div class="group"></div> 
    <div class="group"></div> 
    <div class="group"></div> 

    <p>Lorem ipsum dolor sit amet</p> 

    <div class="group"></div> 
    <div class="group"></div> 
    <div class="group"></div> 
</div>

期望的輸出

<div class="container"> 
    <div class="group-wrapper"> 
    <div class="group"></div> 
    <div class="group"></div> 
    <div class="group"></div> 
    </div> 

    <p>Lorem ipsum dolor sit amet</p> 

    <div class="group-wrapper"> 
    <div class="group"></div> 
    <div class="group"></div> 
    <div class="group"></div> 
    </div> 
</div>

來源

2015-01-26 mhalici

這個特定的結構？或者在其他情況下工作？ – 2015-01-26 18:28:47

我需要一個可以在所有情況下都能正常工作的解決方案。除了組之間的單個段落之外，還可能有其他元素。 – mhalici 2015-01-26 18:39:37

您將不得不將它分解爲不匹配元素之間的組。

$(function(){ 
    $.fn.reverse = [].reverse; 
    var target = '.group', // the class of the elements to group 
     invert = ':not(' + target + ')', // we create the invert to find the breakpoints 
     wrap = '<div class="group-wrapper">', // what to wrap with 
     breakpoints = $('.container > *'+invert); // find the breakpoints in our container 

    breakpoints.each(function(){ 
     $(this).nextUntil(invert).wrapAll(wrap); // get the matching elements efter this breakpoint and wrap them 
    }); 

    breakpoints.first().prevUntil(invert).reverse().wrapAll(wrap); // wrap the elements before the first breakpoint 

});

演示在http://jsfiddle.net/gaby/qz53fggd/

來源

2015-01-26 18:40:32

完美！謝謝！ – mhalici 2015-01-26 18:50:32

爲什麼第一包裝中的訂單更改？看起來像prevUntil/wrapAll組合是預先倒序的順序或東西 – charlietfl 2015-01-26 18:56:47

我猜prevUntil建立自下而上的集合，然後索引wrapAll是相反的 – charlietfl 2015-01-26 19:02:47

下面是基於元件的一種方法是兒童

var $container =$('.container'); 
function wrapGroup(target, $container){ 
    // wrap until next non group element 
    var $groups = $container.children(target) 
    if($groups.length){   
     $groups.first().nextUntil(':not('+target+')').andSelf().wrapAll('<div class="group-wrap">') 
    } 
    // check if more group as children and do it again 
    if($container.children(target).length){ 
     wrapGroup(target, $container); 
    }  
} 
//usage 
wrapGroup('.group', $container);

DEMO

來源

2015-01-26 18:40:08 charlietfl

如何包裝所有相鄰並具有相同類的元素？

回答

相關問題