Geek asks and answers

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

I am trying to implement a jQuery plugin. Code is available on jsFiddle. http://jsfiddle.net/MKL4g/1/ , but I 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 implement this on the Joomla 3.0.2 website using the Gantry 4.1.5 platform.

The CSS for creating 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;
            }
        }
      }
    }
  }
}

The following error appears in the console:

TypeError: "null" is not an object (evaluate to "$ postsList.find")

You can see the implementation here:

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

As you can see, it does not seem to accept list items and splits them into two columns.

, .

- , ?

+5
1

MooTools script. , jQuery.

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


(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);
+2

More articles:


All Articles