Question

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.

Answer 1

You’re appending the <ol> element to #lala before adding the latter to the document. There’s nothing wrong with this, but since you’re using an id selector, and the target element is not part of the document yet, the selector will not match anything.

To fix this, you can write:

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

Or:

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