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

Posted 2023-03-05

【中文标题】调试 jQuery 插件以在两个相等的列中显示动态列表

【英文标题】：Debugging a jQuery plugin to display a dynamic list in two equal columns

【发布时间】：2013-01-04 21:31:26

【问题描述】：

我正在尝试实现一个 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;
            
        
      
    
  

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

TypeError: 'null' 不是对象（评估 '$postsList.find'）

你可以在这里看到实现：

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

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

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

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

【参考方案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);

【讨论】：

有没有一种简单的方法可以将生成的两个列包装在 div 中？我希望每一列都用<div class="gantry-width-50 gantry-width-spacer cat-columns"></div> 包裹，然后最后有一个<div class="clear"></div>。聊天中有人建议使用 wrapInner，但我不确定如何使用它，修改输出可能更容易（从 createHTML 开始？

它似乎 'gantry-width-50' 是您正在使用的框架中的一个类，准确吗？如果是这样，它可能意味着“一个 50% 宽的列”，但我必须看到 CSS 声明。

我会对上面的帖子做一点补充

是的。 .gantry-width-spacer margin: 15px; 和 .gantry-width-50 width: 50%;。真的很简单。而 cat-columns 只是我想添加的一个类，以防我需要对这些 div 进行进一步调整。

我还没有添加.gantry-width-*，因为我希望您分阶段进行。使用上面的代码并确保它给出你想要的输出并且你理解它是如何工作的。我可能搞砸了并忘记了一个元素。我把它做成了所谓的“流利”，即每个动作都完全可以自我控制、清晰易读且专心致志。