Can't append to second container

Posted by George Katsanos on Stack Overflow See other posts from Stack Overflow or by George Katsanos
Published on 2012-06-27T09:05:03Z Indexed on 2012/06/27 9:15 UTC
Read the original article Hit count: 162

Filed under:
|
|

I have the following script:

(function($) {

    $.fn.easyPaginate = function(options){

        var defaults = {                
            step: 4,
            delay: 100,
            numeric: true,
            nextprev: true,
            controls: 'pagination',
            current: 'current' 
        }; 

        var options = $.extend(defaults, options); 
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var page = 1;
        var timeout;
        var clicked = false;

        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }

                if(options.nextprev){
                    if(upper >= count) { next.addClass('stop'); } else { next.removeClass('stop'); };
                    if(lower >= 1) { prev.removeClass('stop'); } else { prev.addClass('stop'); };
                };
            });    
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };

        function auto(){
            if(upper <= count){ page++; show(); }       
            else { page--; show(); }          
        };

        this.each(function(){ 

            obj = this;

            if(count>step){

                var pages = Math.floor(count/step);
                if((count/step) > pages) pages++;
                var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>').insertAfter(obj);

      if(options.nextprev){
            prev = $('<li class="prev">prev</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any more pages in the negative direction
                    if (page > 1) {
                        clicked = true;
                        page--;
                        show();
                    }
                });
        }

                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){    
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });                    
                    };                
                };

        if(options.nextprev){
            next = $('<li class="next">next</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any pages in the positive direction
                    if (page < (count / 4)) {
                        clicked = true;         
                        page++;
                        show();
                    }
                });
        }

                show();
            };
        });    
    };    

})(jQuery);


    jQuery(function($){
    $('ul.news').easyPaginate({step:4});
    }); 

which is a carousel-like plugin that produces this html structure for the navigation:

<ol id="pagination" class="pagin"><li class="prev">prev</li><li data-index="1" class="">1</li><li data-index="2" class="">2</li><li data-index="3" class="current">3</li><li class="next stop">next</li></ol>

And all I want is to enclose this list in a div. Seems simple, but appendTo doesn't want to cooperate with me, or I'm doing something wrong (I'd appreciate if you would help me understand what that is..)

So I'm modifying as such:

var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo('#lala');
tiv.insertAfter(obj);

I know how to chain, but I'm in "debugging" mode trying to understand why I don't get the result I imagine I would get:

<div id="lala>
<ol id="pagination><li>...... </li></ol>
</div>

I tried putting some console.log's to see the status of my variables but couldn't find something useful.. I guess there's something with DOM insertion I don't get.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery