jquery追加项(xml无限滚动)

时间:2013-04-02 21:15:59

标签: jquery xml append jquery-isotope

我尝试将元素附加到xml数据文件中。

我成功完成了onload。我追加加载一定数量的元素。

我想使用此追加功能在点击时从相同的xml数据中添加下一个元素。

为此,我添加条件if和变量。但是没有任何事情发生..

我认为我的if有问题。

我的脚本编辑工作脚本

$(document).ready(function() {

var $container = $('#container');
var $items = $('.element');
var $filter = $('#filter a');

function initIsotope() {
    $container.isotope({
        itemSelector: $items,    
        animationOptions: {
            duration: 4000,
            easing: 'easeInOutQuad',
            queue: false
        } 
    });
        $filter.on('click', function(){
    $container.isotope({
        filter: this.getAttribute('data-option-value')
     })
    });
    $(' #container > div ').each( function() { $(this).hoverdir(); } );
}


$.get('data.xml', function (d){
        first = $(d).find("element").last().attr("id");
    last = $(d).find("element").first().attr("id");
    init();     
});

$('#next').on("click", function() {
    init(); 
        $('#container').isotope({
itemSelector: '.element',  
        });
});


function init(){

$.get('data.xml', function (d){

            var nbOfelemet = 1;
            var nbToappend = last - nbOfelemet; 
            alert(last);
            alert(nbToappend);  

$(d).find('element').each(function (){  

    if ( $(this).attr("id") <= last ) {

            var $element = $(this);
            var id = $element.attr("id");
            var size = $element.attr("size");
            var category = $element.attr("category");
            var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();      

var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');

$container.isotope( 'insert', $newelement)

var next = id;      
last = id -1 ;  
if (  first == next ) {     
$("#next-container").fadeOut(500);
}       
return ( id != nbToappend);
   }
            });
            initIsotope();      
    });
}

})

1 个答案:

答案 0 :(得分:0)

jQuery同位素解决方案:

如果要重建同位素堆栈,请执行以下操作:

$(selector).isotope( 'destroy' )
  .isotope( 'insert', elem-previous, null )
  .isotope( 'insert', elem-current, null )
  .isotope( 'insert', elem-next, function(){focusIsotopToCurrentId();} );

// focusIsotopToCurrentId() is an optional function if you want to
// create a callback function to focus your click on something

现在所有内容都已更正,请将以下内容放在当前插入的位置,并将变量传递给elem-previouselem-currentelem-next