Agir sur l'élément jQuery cloned()

Question

J'ai cloné de la pagination en utilisant la méthode clone() de jQuery. Lorsque j'essaie d'afficher le numéro de la page en cours (addClass ('actif')), le comportement ne se produit que sur la version clonée de l'élément. Quelqu'un peut-il aider?

$(document).ready(function() { 
$('table.paginated').each(function() { 
    var currentPage = 0; 
    var numPerPage = 10; 
    var $table = $(this); 
    var repaginate = function() { 
     $table.find('tbody tr').hide() 
      .slice(currentPage * numPerPage, 
       (currentPage + 1) * numPerPage) 
      .show(); 
     }; 
    var numRows = $table.find('tbody tr').length; 
    var numPages = Math.ceil(numRows/numPerPage); 
    var $pager = $('<div class="pager"></div>'); 
    for(var page = 0; page < numPages; page++) { 
    $('<span class="page-number"></span>').text(page + 1) 
     .bind('click', {newPage: page}, function(event) { 
      currentPage = event.data['newPage']; 
      repaginate(); 
      $(this).addClass('active') 
       .siblings().removeClass('active'); 
     }).appendTo($pager).addClass('clickable'); 
    } 
    $pager.insertBefore($table).clone(true).insertAfter($table) 
     .find('span.page-number:first').addClass('active'); 
}); 
}); 

Answer 1

La fonction clone crée un nouvel ensemble enveloppé constitué du nouvel élément. La fonction addClass fonctionne sur l'élément unique à la place de l'élément d'origine et de son clone.

Une alternative consiste à appeler end() après avoir appliqué la classe. Cette fonction rétablira votre contexte dans l'ensemble enveloppé d'origine.

$pager 
    .insertBefore($table) 
    .clone(true) 
    .insertAfter($table) 
    .find('span.page-number:first') 
    .addClass('active') 
    .end() 
    .addClass('active'); 

Answer 2

'span.page-number:first' 

développer sélecteur. En ce moment, il sélectionne tout span.page-number puis sélectionne le premier. si vous faites quelque chose comme

"div span.pagenumber:first" 

cela pourrait juste fonctionner. Comme nous l'avons vu ci-dessous, le clone duplique simplement l'élément. Il ne suit pas tous les clones, il fait exactement cela - clone l'élément et l'oublie.

Answer 3

clone() sélectionne l'élément cloné. Dans cette instruction:

$pager.insertBefore($table).clone(true).insertAfter($table) 
       .find('span.page-number:first').addClass('active'); 

il est clair que addClass est appliquée uniquement au clone après clone dire (true) ...,