無法追加到第二容器

Question

我有以下腳本：

(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}); 
    }); 

這是一個旋轉木馬般的插件，用於導航產生這個網站結構：

<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> 

所有我想要是把這個列表放在一個div中。似乎很簡單，但appendTo不想與我合作，或者我做錯了什麼（我會很感激，如果你能幫助我理解那是什麼..）

所以我正在修改爲：

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

我知道如何鏈，但我在「調試」模式，試圖瞭解爲什麼我沒有得到的結果我想我會得到：

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

我試圖把一些console.log的查看我的變量的狀態，但找不到有用的東西..我想有一些與DOM的東西rtion我不明白。

Answer 1

在將後者添加到文檔之前，您正在將<ol>元素附加到#lala。這沒有什麼問題，但由於您使用的是ID選擇器，而且目標元素還不是文檔的一部分，所以選擇器不會匹配任何內容。

爲了解決這個問題，你可以寫：

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

或者：

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