我正在使用我的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>
这将继续在第3周到第7周继续列出项目。
HTML: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之前
<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>
jQuery之后
<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>
答案 0 :(得分:1)
我想你想要这样的东西
$(function(){
$('li.week_1').not('ul li').wrapAll('<ul class="devotionals"/>');
$('.week_2').not('ul li').wrapAll('<ul class="devotionals"/>');
});
如果它无法解决您的问题,请发布具有相同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
});
答案 1 :(得分:0)
选择尚未包含在'devotionals'类中的每个类的前五个,并将它们包装起来。然后重复,直到没有剩余的未包裹。这是你运行的选择器,直到包装好所有东西:
$('.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);