-1

我正在使用我的 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>
4

2 回答 2

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);
    });
});

如果您想在这些lis 上添加任何事件处理程序，请使用类似这样的东西（委托）

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

例子。

于 2013-10-21T22:12:45.417 回答
0

选择每个班级中尚未包含在“灵修”班级中的前五个，然后将它们包装起来。然后重复，直到没有剩余的没有被包裹。这是您运行的选择器，直到所有内容都被包装：

$('.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);
于 2013-10-21T21:05:45.410 回答