5

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

ご覧のとおり、リスト項目を取得して 2 つの列に分割しているようには見えません。

結果の表示では、リストが 2 つの列に分割され、リスト項目が視覚的に列の中央に配置されます。

誰かがこれをデバッグして解決する方法をアドバイスできますか?

4

1 に答える 1

2

スクリプトの開始時に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);
于 2013-01-22T03:25:51.023 に答える