استخدم Isotope مع الكائنات المحملة باستخدام XML وjQuery.هل هذا ممكن؟

Question

لدي كائنات أقوم بتحميلها باستخدام XML وjQuery وأحاول الارتباط بـ Isotope، ولكن يبدو أن هذا أمر مستحيل.هل هذا ممكن؟لقد جربت العديد من الحلول المختلفة ولكن يبدو أنني لم أجد الحل الذي يعمل.هذا ما لدي.لقد حاولت وظيفة رد الاتصال في النظائر، ولكن لم يحالفني الحظ حتى الآن.أنا أتصل بصفي باستخدام XML والنتيجة هي هذه في firebug: البند الأصفر، البند الأحمر, البند الأزرق, ، إلخ.

    var $container = $('#container');
    var $checkboxes = $('#filters a');

    $container.isotope({
    itemSelector: '.item',
    transformsEnabled: false,
    animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: complete()
    }
    });


    function complete(){
           $.get('sites.xml', function (d) {

    $(d).find('site').each(function () {
        // var id = $(this).attr('id');
        var imageUrl = $(this).find('imgurl').text();
        var title = $(this).find('title').text();
        var url = $(this).find('url').text();
        var brief = $(this).find('brief').text();
        var long = $(this).find('long').text();
        var classa = $(this).find('_class').text();

    $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
        <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
        </a>').appendTo('#container');

        });

     });

        }

Answer 1

يبدو أنك تقوم بإضافة العناصر الخاصة بك إلى الحاوية بعد اكتملت الرسوم المتحركة.أعتقد أن الأمر يجب أن يكون على العكس من ذلك:على الصفحة جاهزة:

• قم بعمل اياكس الخاص بك
• في رد الاتصال الناجح أضف العناصر إلى DOM
• ثم قم بتهيئة النظائر (الخطوة الأخيرة في نجاح اياكس)

يحرر:على سؤالك في التعليق:لست متأكدًا مما إذا كنت أفهم ما تطلبه.نظرًا لعدم وجود jsfiddle أو أي شيء كان علي أن أقوم بافتراضات إجمالية:

• الحاوية الخاصة بك فارغة
• يمكنك تحميل بعض ملفات XML وتحليلها وإنشاء العناصر التي تريد الحصول عليها في النظائر
• يبدو الكود الخاص بك وكأنك تقوم بتهيئة النظائر في حاوية فارغة - ثم قم بإضافة العناصر.

بلدي الحل:

var $container = $('#container');
var $checkboxes = $('#filters a');

init();

function init(){
    $.get('sites.xml', function (d) {

        $(d).find('site').each(function () {
            var imageUrl = $(this).find('imgurl').text();
            var title = $(this).find('title').text();
            var url = $(this).find('url').text();
            var brief = $(this).find('brief').text();
            var long = $(this).find('long').text();
            var classa = $(this).find('_class').text();

            $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
            <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
            </a>').appendTo('#container');

            }); // end each

        initIsotop(); // after adding all elements - init isotop
    }); // end $.get
}

function initIsotop() {
    $container.isotope({
        itemSelector: '.item',
        transformsEnabled: false,    
        animationOptions: {
            duration: 4000,
            easing: 'easeInOutQuad',
            queue: false
        }
    });
}