3

I'd like to use jQuery to wrap <ul class="main-list"> around each 6 of it's first children <li>'s. What's the best way to accomplish this with jQuery?

Here's the jQuery I'm using:

$(document).ready(function() {
    var lis = $(".main-list li");
    for(var i = 0; i < lis.length; i+=6) {
      lis.slice(i, i+6)
         .wrapAll("<ul class='list_unstyled'></ul>");
    }
});

Here's the original code (ExpressionEngine):

<ul class="list-unstyled main-list">
    {exp:channel:category_archive channel="speakers" style="linear" backspace="7"}
        <li>
            {categories}
                <a href="#">{category_name}</a>
            {/categories} 
            {entry_titles}  
            <ul class="list-unstyled"> 
                <li><a href="{path='site/speaker'}">{title}</a></li>
            </ul>  
            {/entry_titles}     
        </li>   
    {/exp:channel:category_archive}     
</ul>

Here's the code that's currently being outputted with jquery above:

<ul class="list-unstyled main-list">
    <ul class="list_unstyled">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list_unstyled">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</ul>

Here's the desired result after implementing jQuery:

<ul class="list_unstyled">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="list_unstyled">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
frshjb373
  • 627
  • 9
  • 27
  • Please include your jQuery code and original HTML so we can help to troubleshoot. – showdev Jun 12 '15 at 18:31
  • I modified my question a bit. I actually tried a few pieces of jQuery code, but with no luck so didn't post with my questions. Don't' think it would be relevant. – frshjb373 Jun 12 '15 at 18:43
  • 1
    Fair enough. It seems to me that it will be helpful to see what you've already tried and what specifically went wrong. I find that this procedure facilitates learning (for both current and future readers) more than just generating code according to a specification. – showdev Jun 12 '15 at 18:49
  • @ Sergey Denisov, yes it's similar, and I've come across this post, but it's not quite the same thing. – frshjb373 Jun 12 '15 at 19:13
  • @showdev, pasted my jQuery above and modified my question a bit. Please keep me posted. Thank you! – frshjb373 Jun 12 '15 at 19:19
  • eh? you change it.. now it doesn't make sense.. do you want to wrap each 6 li's with a .main-list? or do you want to remove the .main-list? – Keith A Jun 12 '15 at 19:43
  • @Keith I did simplify code a bit just to make more understandable. Really, I'm trying to turn the outputted code above into the desired result above. Let me know if you can help. Thanks! – frshjb373 Jun 12 '15 at 19:48

3 Answers3

1

your jquery function already does what you wanted, which is to group them by 6, so you just need to remove the .main-list wrapping your list. all you need to do is unwrap after the loop.

$('.main-list>ul').unwrap();

i.e.

$(document).ready(function() {
    var lis = $(".main-list li");
    for(var i = 0; i < lis.length; i+=6) {
      lis.slice(i, i+6)
         .wrapAll("<ul class='list_unstyled'></ul>");
    }

    $('.main-list>ul').unwrap();

});
Keith A
  • 771
  • 6
  • 12
0

I think something like this:

function wrapLi( parent ){
    var numChildren = $( parent ).children( 'li' ).length,
        wrappers = [];

    for( var i = 0; i < numChildren / 6; i++ ){
        wrappers[i] = $( '<ul class="main-list"></ul>' );

        // the meat and potatoes... select the first six elements of the matched set
        // check out http://www.w3schools.com/jquery/jquery_ref_selectors.asp
        wrappers[i].append( $( parent ).children( 'li:lt(6)' ) );
    }

    return wrappers; // the array of <ul> that you can put wherever you want
}

var stuff = wrapLi(  $( '.main-list' ) );

$( 'body' ).append( stuff );

Also here is a fiddle where you can mess with it. http://jsfiddle.net/nfw0kpxt/

etchesketch
  • 821
  • 4
  • 14
0

Here you have my JsFiddle

Very easily solved. 

var firstUl = $("<ul>");
var secondUl = $("<ul>");
var size = $(".main-list li").size();
var elements = $(".main-list li");
size--;

for(var i = 0; i < size; i++) {
    firstUl.append(elements[i]);
}

secondUl.append(elements[size++]);

$(".result").append(firstUl);
$(".result").append(secondUl);
mapodev
  • 988
  • 8
  • 14