How to split a dynamic list into two equal columns using jQuery

Let’s say you have a dynamically generated list.  You don’t know how long this list will be, but you want it to be displayed in 2 columns rather than just one.  An example could be a list of posts in WordPress, something like this:

  • Post one
  • Post two
  • Post three
  • Post four
  • Post five
  • Post six
  • Post seven
  • Post eight
  • Post nine

Using a little jQuery magic we can take this list, split it into two and then output it into 2 separate lists, so that it looks like this for example:

  • Post one
  • Post two
  • Post three
  • Post four
  • Post five
  • Post six
  • Post seven
  • Post eight
  • Post nine

 

 

 

 

 

Here’s how we can do it:

  1. Create an array of the original list
  2. Split that array in half
  3. Throw the first half back into the original list
  4. Create a second list to throw the second half into

Here’s an example of it in action:  Demo

Here’s the JavaScript/jQuery to make it happen:

var postsArr = new Array(),
$postsList = $('ul.posts');

//Create array of all posts in lists
$postsList.find('li').each(function(){
postsArr.push($(this).html());
})

//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
secondList = postsArr,
ListHTML = '';
function createHTML(list){
ListHTML = '';
for (var i = 0; i < list.length; i++) {
ListHTML += '<li>' + list[i] + '</li>'
};
}

//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);

//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul></ul>').next().html(ListHTML);

7 much appreciated responses...

  1. Alberto León says:

    Good aproach. Is any official plug-in or technique to achieve multi-column?

  2. Ile Maurice says:

    very good post..however i have one question which might seem a little stupid..

    but in ul.posts, what is posts ? is it a class ? the name of a class ?what is it ?

  3. Scott says:

    This is a brilliant function for unordered lists and I plan to use a variation this for some of my wordpress sites if you don’t mind. Thank you very much for the tutorial, great examples and written very well. What would we do without jQuery these days?

  4. Jack says:

    How about if we have got more than one lists? E.G:

    Post 1
    Post 2
    Post 3
    Post 4
    Post 5
    Post 6
    Post 7

    Post 21
    Post 22
    Post 23
    Post 24

    I did above and checked results in fiddle and found that the lists get duplicate content. I expect each should separate its own content. What are your suggestions on this?

  5. Jitin says:

    I have posted solution below. Check it out. You just need to iterate and embed the code inside it for splitting array n all. Hope this helps.

    var postsArr = new Array(),
    $postsList = $(‘ul.posts’);

    // To recursively iterate
    $postsList.each(function(){

    //Create array of all posts in lists
    $(this).find(‘li’).each(function(){
    postsArr.push($(this).html());
    })
    //Split the array at this point. The original array is altered.
    var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
    secondList = postsArr,
    ListHTML = ”;
    function createHTML(list){
    ListHTML = ”;
    for (var i = 0; i < list.length; i++) {
    ListHTML += '’ + list[i] + ”
    };
    }
    //Generate HTML for first list
    createHTML(firstList);
    $postsList.html(ListHTML);
    //Generate HTML for second list
    createHTML(secondList);
    //Create new list after original one
    $postsList.after(”).next().html(ListHTML);

    }

    Dont mind to correct me if I am wrong somewhere.

    Cheers. 🙂

Feel free to add your comment..

Your email address will not be published.