将Isotope与使用XML和jQuery加载的对象一起使用。 这可能吗？

我有用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(); $('
').html(' ' + '
' + title + '
 ').appendTo('#container'); }); }); } 

Answer 1

看起来您在动画完成后将元素添加到容器中。 我认为必须反过来：在页面准备好了：

• 做你的ajax
• 在success-callback中，将元素添加到DOM中
• 然后初始化同位素（ajax成功的最后一步）

编辑：评论中的问题：我不确定我是否理解你的要求。 既然没有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(); $('
').html(' ' + '
' + title + '
 ').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 } }); }