0

コンテナ内に絶対divを配置して、上部の位置と高さを計算するカスタム関数を作成しました。

$.fn.gridB = function() {
    var o = $(this); //EDITED from var o = $(this[0]);
    o.each(function() {
        var a1top = o.find('.article1').position().top;
        var a1height = o.find('.article1').height();
        var a0top = o.find('.article0').position().top;
        var a0height = o.find('.article0').height();
        var a2top = o.find('.article2').position().top;
        var a2height = o.find('.article2').height();
        var a3height = o.find('.article3').height();
        var a4height = o.find('.article4').height();
        var a5height = o.find('.article5').height();
        if (a0height > a1height + a1top) {
            $('.article3', o).css('top', a0top + a0height + 20);
        } else if (a0height < a1height + a1top) {
            $('.article3', o).css('top', a1top + a1height + 20);
        }
        $('.article4', o).css('top', a2top + a2height + 20);
        $('.article5', o).css('top', a2top + a2height + 20);
        $('.article6', o).css('top', a2top + a2height + a5height + 40);
        $('.article7', o).css('top', a2top + a2height + a5height + 40);
        var lastChildPos = o.find('div:last-child').position().top;
        var lastChildHeight = o.find('div:last-child').height();
        o.height(lastChildPos + lastChildHeight + 20);
    });
};​

コンテナにはクラス「.fours」があり、srciptはウィンドウのロードで完全に機能します。しかし、ajaxの無限スクロールロードの後に​​呼び出されると、絶対divを次の「.fours」コンテナー内に正しく配置できません。

function loadArticle(pageNumber) {
    $('a#inifiniteLoader').fadeIn('fast');
    $.ajax({
        url: "wp-admin/admin-ajax.php",
        type: 'POST',
        data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop',
        success: function(html) {
            $('a#inifiniteLoader').fadeOut('1000');
            $("#content").append(html); // This will be the div where our content will be loaded
            $('.fours:last').preloader_index();
            $('.fours').gridB(); // EDITED from $('.fours:last').gridB();
            $('.article a').on({
                mouseenter: function() {
                    if (!$('.preloader', $(this).parent('.article')).length > 0) {
                        $(this).stop().css('opacity', '1');
                    }
                },
                mouseleave: function() {
                    if (!$('.preloader', $(this).parent('.article')).length > 0) {
                        $(this).stop().css('opacity', '0');
                        $('.article-info', $(this).parent('.article')).stop().fadeTo(200, 0);
                    }
                }
            });
        }
    });
    return false;
}​

何か問題がありますが、私はかなり近いです。ajaxが成功した後に関数gridB（）を呼び出すときに.fours：lastを指定すると、スクリプトは高さを無視してdivの最上位のみを計算します。：lastを削除すると、スクリプトは上部の位置と高さの両方を計算しません。

何か助けはありますか？

編集：これは関連するHTMLの例です。クラスのある別のdiv

 <div id="content">
<div class="fours">
  <div class="article article0">
     <div><img src="url" /></div>
  </div>
  <div class="article article1">
     <div><img src="url" /></div>
  </div>
  <div class="article article2">
     <div><img src="url" /></div>
  </div>
  <div class="article article3">
     <div><img src="url" /></div>
  </div>
  </div>
<!-- Next ".fours" div is loaded here with ajax function -->
</div>

編集2：gridB関数で、行var o = $（this [0]）;を変更しました。to var o = $（this）; $（'。fours：last'）。gridB（）;から関数呼び出しを変更しました。to $（'。fours'）。gridB（）;。それは機能しましたが、スクリプトはすべての絶対divを、最初の記事のセットの値を使用して、ロードされた次のセットのajax内に配置します。私はそれが解決策に近いと思います。ajaxによってロードされたコンテナーをターゲットにする方法が必要です。：lastは機能しません。

4

1 に答える 1

0

最後の編集のコメントに関しては、最後に<div class="fours" />追加されたものを参照するために次のことを行うことができます。

success: function(html) {
    var $html = $(html);                       // Wrap HTML in jQuery object.
    $('a#inifiniteLoader').fadeOut('1000');
    $("#content").append($html);               // Add created object.

    $html.preloader_index();                   // Use the same object.
    $html.gridB();                             // Call gridB using the same object.
于 2012-10-26T18:22:16.637 に答える