Search code examples
jqueryexpressionengine

jQuery .wrapAll() Issue

I am using my CMS to output list items, and then I am using .wrapAll() to wrap the list items in a ul based on their class. This is to basically group them, because I can't do it on the server side with my CMS.

But it is wrapping list items that have the same class into one unordered list. How can I get around this?

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: Before 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>

This continues to continue list items with week 3 through 7.

HTML: After 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: How it should render

<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>

EDIT This is basically what it is in HTML.

Before 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>

After 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>
Solution

  • I think you want something like this

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

    Example.

    If it doesn't solve your problem then post other li (with relevant parent/location) that have same class but you want to exclude from wrapping.

    Update :

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

    If you want to add any event handler on these lis then use something like this (delegated)

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

    Example.