Debug di un plug-in jQuery per visualizzare un elenco dinamico in due colonne uguali

Question

Sto cercando di implementare un plug-in jQuery. Il codice è disponibile su jsFiddle. http://jsfiddle.net/MKL4g/1/ ma ho anche copiato le mie modifiche di seguito.

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

Lo sto implementando su un sito di Joomla 3.0.2 utilizzando Gantry 4.1.5 Framework.

Il CSS per lo stile risultante serie UL LI è la seguente (Formato MENO):

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

ottengo il seguente errore nella console:

TypeError: 'null' non è un oggetto (la valutazione '$ postsList.find')

è possibile vedere l'attuazione qui:

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

Come si può vedere, non sembra prendere le voci dell'elenco e dividerle in due colonne.

La visualizzazione risultante dovrebbe dividere l'elenco in due colonne e fare in modo che le voci dell'elenco siano centrate visivamente sulle colonne.

Qualcuno può consigliare come eseguire il debug e risolvere questo?

Answer 1

Hai MooTools abilitato e all'inizio del tuo script. Giralo in modo tale da utilizzare i selettori 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); 

---

di modifica per la nuova richiesta

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