jQuery .wrapAll（）問題

Question

我正在使用我的CMS來輸出列表項目，然後我使用.wrapAll（）來根據它們的類將ul列表項打包。這基本上是對它們進行分組，因爲我不能在服務器端使用我的CMS進行分組。

但是它將具有相同類的列表項放入一個無序列表中。我怎樣才能解決這個問題？

jQuery的

$('.week_7').wrapAll('<ul class="devotionals"/>'); 
$('.week_6').wrapAll('<ul class="devotionals"/>'); 
$('.week_5').wrapAll('<ul class="devotionals"/>'); 
$('.week_4').wrapAll('<ul class="devotionals"/>'); 
$('.week_3').wrapAll('<ul class="devotionals"/>'); 
$('.week_2').wrapAll('<ul class="devotionals"/>'); 
$('.week_1').wrapAll('<ul class="devotionals"/>'); 

HTML：之前的jQuery

<li class="week_1">Day 1</li> 
<li class="week_1">Day 2</li> 
<li class="week_1">Day 3</li> 
<li class="week_1">Day 4</li> 
<li class="week_1">Day 5</li> 
<li class="week_2">Day 1</li> 
<li class="week_2">Day 2</li> 
<li class="week_2">Day 3</li> 
<li class="week_2">Day 4</li> 
<li class="week_2">Day 5</li> 

這種情況會貫穿7

HTML繼續用3星期日期清單中的項目：jQuery的

<ul> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
</ul> 

後HTML：應該如何呈現

<ul> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
</ul> 
<ul> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
</ul> 

編輯這基本上就是它是在HTML中。

jQuery的

之前的jQuery

<section class="series"> 
    <h1>June</h1> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
</section> 
<section class="series"> 
    <h1>July</h1> 
    <li class="week_1">Day 1</li> 
    <li class="week_1">Day 2</li> 
    <li class="week_1">Day 3</li> 
    <li class="week_1">Day 4</li> 
    <li class="week_1">Day 5</li> 
    <li class="week_2">Day 1</li> 
    <li class="week_2">Day 2</li> 
    <li class="week_2">Day 3</li> 
    <li class="week_2">Day 4</li> 
    <li class="week_2">Day 5</li> 
</section> 

後

<section class="series"> 
    <h1>June</h1> 
    <ul class="devotionals"> 
     <li class="week_1">Day 1</li> 
     <li class="week_1">Day 2</li> 
     <li class="week_1">Day 3</li> 
     <li class="week_1">Day 4</li> 
     <li class="week_1">Day 5</li> 
     <li class="week_1">Day 1</li> <!-- July Week 1 --> 
     <li class="week_1">Day 2</li> 
     <li class="week_1">Day 3</li> 
     <li class="week_1">Day 4</li> 
     <li class="week_1">Day 5</li> 
     <li class="week_2">Day 1</li> 
     <li class="week_2">Day 2</li> 
     <li class="week_2">Day 3</li> 
     <li class="week_2">Day 4</li> 
     <li class="week_2">Day 5</li> 
     <li class="week_2">Day 1</li> <!-- July Week 2 --> 
     <li class="week_2">Day 2</li> 
     <li class="week_2">Day 3</li> 
     <li class="week_2">Day 4</li> 
     <li class="week_2">Day 5</li> 
    </ul> 
</section> 
<section class="series"> 
    <h1>July</h1> 

</section> 

Answer 1

我想你想要類似這樣的東西

$(function(){ 
    $('li.week_1').not('ul li').wrapAll('<ul class="devotionals"/>'); 
    $('.week_2').not('ul li').wrapAll('<ul class="devotionals"/>'); 
}); 

Example.

如果不解決您的問題，那麼其它後li（相關父/位置）具有相同的class，但你想從包裝排除。

更新：

$(function(){ 
    $('section.series').each(function(){ 
     var ul1 = $('<ul />', {'class':'devotionals'}), ul2 = ul1.clone(); 
     ul1.append($(this).find('li.week_1')); 
     ul2.append($(this).find('li.week_2')); 
     $(this).append(ul1).append(ul2); 
    }); 
}); 

如果要添加這些li小號任何事件處理程序，然後使用像這樣（委託）

$('section.series').on('click', 'ul > li', function(){ 
    // code here 
}); 

Example.

Answer 2

選擇每個尚未包裹在一個 '靈脩' 類級的第5名，而這些包裹。然後重複，直到沒有沒有未被包裝的剩餘物。這是包，你運行的選擇，直到一切都：

$('.week_1:not(.devotionals > li):lt(5), .week_2:not(.devotionals > li):lt(5), 
    .week_3:not(.devotionals > li):lt(5), .week_4:not(.devotionals > li):lt(5), 
    .week_5:not(.devotionals > li):lt(5), .week_6:not(.devotionals > li):lt(5), 
    .week_7:not(.devotionals > li):lt(5)').wrapAll('<ul class="devotionals"/>'); 

並晾乾，高達一點：

var week_not_wrapped = '.week_X:not(.devotionals > li):lt(5)'; 
var weeks_not_wrapped = []; 

for (var i = 1; i <= 7; ++i) 
{ 
    weeks_not_wrapped.push(week_not_wrapped.replace('X', i)); 
} 

weeks_not_wrapped = weeks_not_wrapped.join(','); 

do { $(weeks_not_wrapped).wrapAll('<ul class="devotionals"/>'); } 
while($(weeks_not_wrapped).length > 0); 

...和收縮它遠一點：

var weeks_not_wrapped = $.map([1, 2, 3, 4, 5, 6, 7], function(elem) { 
    return '.week_' + elem + ':not(.devotionals > li):lt(5)'; 
}).join(','); 

do { $(weeks_not_wrapped).wrapAll('<ul class="devotionals"/>'); } 
while($(weeks_not_wrapped).length > 0);