Debugowanie wtyczki jQuery do wyświetlania listy dynamicznej w dwóch równych kolumnach

Question

Próbuję zaimplementować wtyczkę jQuery. Kod jest dostępny na jsFiddle. http://jsfiddle.net/MKL4g/1/ ale również skopiowałem moje modyfikacje poniżej.

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

Wdrażam to na stronie Joomla 3.0.2, korzystając z Gantry 4.1.5 Framework.

CSS do stylu otrzymaną macierz UL LI jest następujący (mniej 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; 
      } 
     } 
     } 
    } 
    } 
} 

pojawia się następujący błąd w konsoli:

TypeError: 'null' nie jest przedmiot (oceny '$ postsList.find')

można zobaczyć realizację tutaj:

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

Jak widać, wygląda na to, że nie zajmuje pozycji listy i dzieli je na dwie kolumny.

Wynikowy ekran powinien podzielić listę na dwie kolumny i mieć elementy listy wizualnie wyśrodkowane na kolumny.

Czy ktoś może doradzić, jak debugować i rozwiązać ten problem?

Answer 1

Masz włączone MooTools i na początku skryptu. Odwróć to, aby używać selektorów 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); 

---

edycja nowego wniosku

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