Debugging a jQuery plugin to display a dynamic list in two equal columns

Question

I am trying to implement a jQuery plugin. The code is available on jsFiddle. http://jsfiddle.net/MKL4g/1/ but I have also copied my modifications below.

var postsArr = new Array(),
    $postsList = $('div.cat-children ul');

//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 class="cat-list"></ul>').next().html(ListHTML);

I am implementing this on a Joomla 3.0.2 site using the Gantry 4.1.5 Framework.

The CSS to style the resulting UL LI array is as follows (LESS Format):

body {
  &.menu-face-à-la-crise,
  &.menu-divorce-séparation,
  &.menu-études-de-cas,
  &.menu-effets-de-la-vie-séparée,
  &.menu-effets-du-divorce,
  &.menu-effets-communs,
  &.menu-situations-particulières,
  &.menu-formulaires-modèles,
  &.menu-suppléments-addendas,
  &.menu-à-propos-de-nous {
    div#rt-mainbody-surround {
      margin-top: -1px;
      background: @whitebrown;
    }
    div.component-content {
      .blog {
        li {
          text-align: center;
          font-family: @headingFontFamily;
          font-weight: 700;
          font-size: 2.0em;
          line-height: 1.5em;
          text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        }
        div.cat-children {
            ul {
              float: left;
              padding: 10px;
            }
        }
      }
    }
  }
}

I get the following error in the console:

TypeError: 'null' is not an object (evaluating '$postsList.find')

You can see the implementation here:

http://gobet.ergonomiq.net/études-de-cas/effets-du-divorce

As you can see, it doesn't seem to take the list items and split them into two columns.

The resulting display should split the list into two columns, and have the list items be visually centred to the columns.

Can someone advise how to debug and resolve this?

Answer 1

You have MooTools enabled and at the beginning of your script. Flip it so that you're using the jQuery selectors.

var postsArr = [],
    $postsList = jQuery('.cat-children ul');

//Create array of all posts in lists
$postsList.find('li').each(function(){
    postsArr.push(jQuery(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 class="cat-list"></ul>').next().html(ListHTML);

---

edit for the new request

(function updateColumns($){
    var postsArr = [],
        $postsList = $('.cat-children ul'),
        $parent = $postsList.parent();

    //Create array of all posts in lists
    $postsList.find('li').each(function(){
        postsArr.push(jQuery(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 = '', <-- not needed
        $insertWrapper = $('<div>').addClass('cat-children');

    function createHTML(list){
        var $ul = $('<ul>').addClass('cat-list');
        for (var i = 0; i < list.length; i++) {
            $ul.append( $('<li>').html( $(list[i]).html() ) );
        };
        var $wrappedDiv = $('<div>').addClass('gantry-width-50 cat-columns').append( $ul )
        return $wrappedDiv;
    }

    //Generate HTML for first list
    $insertWrapper.append( createHTML(firstList) );
    $insertWrapper.append( createHTML(secondList) );

    $postsList.replaceWith( $insertWrapper );
})(window.jQuery);