1

ajax で返されたアイテムを Packery に追加し、現在のアイテムを削除して、新しいアイテムをレイアウトしたいと考えています。

Metafizzy（開発者）のフォークペンを使用してcodepenで作業しています

これはまさに私が欲しい機能です: http://codepen.io/anon/pen/Cnbxu/

ただし、私のコードケースでは、すでに作成されている要素配列を使用しているため、items 配列を作成したり、DOM に追加したりする必要はありません。

これが私が使用しているコードのサンプルです。

$.post( ajax_vars.ajaxurl, { action: 'function', param : param }, function(data){

    if( data == '' || data == 'undefined' || data == 'No More Posts' || data == 'No $args array created' ){
        data = '';
    }      
    //gather current Packery elements
    var elToRemove = pckry.getItemElements()
    // append elements to container
    container.append($(data));
        console.log(elems);
    // add and lay out newly appended elements
    pckry.addItems($(data));

    pckry.remove(elToRemove);
    packery.layout();
      elems = pckry.getItemElements();
    console.log(elems);

    }
});

要素があり、 console.log($(data)) が応答を示し、インスペクターを確認すると、コンテナー div 内に返された要素が表示されます。問題は、私が何をしても、Packery に新しいアイテムを「認識」させ、それに応じてレイアウトさせることができないことです。elems は空を返します。addItems()、prepended()、appended() メソッドを無駄に使用しました。

何か助けはありますか？

4

1 に答える 1

0

最初に append を呼び出す必要があるようです。その後、append を呼び出した後、非常に注意が必要です。

これが私がそれを機能させる方法です

    var elems = [];
    var elem = document.createElement('div');
    elem.innerHTML = "<img src='http://placehold.it/1000X500'></div>"
    elem.className = 'item'
    //add your element to the arrays, you can add multiple here
    elems.push(elem)
    // append elements to container
    container.append(elems);
    // add and lay out newly appended elements
    container.packery('appended', elems);
于 2016-01-05T00:39:08.780 に答える