jquery-plugins - 调试 jQuery 插件以在两个相等的列中显示动态列表

Question

我正在尝试实现一个 jQuery 插件。该代码可在 jsFiddle 上找到。 http://jsfiddle.net/MKL4g/1/但我也在下面复制了我的修改。

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

我正在使用 Gantry 4.1.5 框架在 Joomla 3.0.2 站点上实现这一点。

为结果 UL LI 数组设置样式的 CSS 如下(LESS 格式):

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

我在控制台中收到以下错误:

类型错误:'null' 不是一个对象(评估 '$postsList.find')

您可以在此处查看实现:

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

如您所见，它似乎没有将列表项分成两列。

结果显示应将列表分成两列，并使列表项在视觉上以列为中心。

有人可以建议如何调试和解决这个问题吗？

Answer 1

您在脚本的开头启用了 MooTools。翻转它，以便您使用 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);