将同位素与通过XML和jQuery加载的对象一起使用.这可能吗? [英] Use Isotope with objects loaded in with XML and jQuery. Is this possible?

问题描述

我有一些要用XML和jQuery加载的对象，并试图连接到Isotope，但似乎是行不通的.这可能吗?我尝试了许多不同的解决方案，但似乎找不到有效的解决方案.这就是我所拥有的.我已经尝试了同位素回调函数，但还是没有运气..我正在用XML调用类，结果是在萤火虫中显示:黄色的项目，红色的项目，项目蓝色，等等.

I have objects I am loading in with XML and jQuery and trying to hook on to Isotope, but is seems it's a no go. Is this possible? I've tried many different solutions but can't seem to find one that works. This is what I have. I've tried a callback function in isotope, but still no luck.. I am calling in my class with the XML and the result is this in firebug: item yellow, item red, item blue, etc.

    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');

        });

     });

        }

推荐答案

好像您是在动画完成后之后将元素添加到容器中. 我认为这必须是另一种方式: 在页面上准备好:

looks like you are adding your elements to the container after the animation is completed. I think it has to be the other way around: on page ready:

• 做你的ajax
• 在成功回调中将元素添加到DOM
• 然后初始化同位素(ajax成功的最后一步)

在评论中回答您的问题: 我不确定我是否理解您的要求. 由于没有jsfiddle或我必须做的总和假设:

edit: to your question in the comment: I'm not sure if I understand what your asking for. Since there is no jsfiddle or something I had to make sum assumptions:

• 您的容器为空
• 您加载一些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
        }
    });
}

这篇关于将同位素与通过XML和jQuery加载的对象一起使用.这可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！