Действуя на элементе jQuery cloned ()

Question

Я клонировал некоторые страницы, используя метод jQuery clone () . Когда я пытаюсь показать номер текущей страницы ( addClass ('active') ), это происходит только в клонированной версии элемента. Кто-нибудь может помочь?

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

'span.page-number:first'

развернуть селектор. Прямо сейчас он выбирает весь span.page-номер, а затем выбирает первый. если вы делаете что-то вроде

"div span.pagenumber:first"

это может сработать.

Обновление , как указано ниже, клон просто дублирует элемент, с которого он не с этой точки, отслеживает все клоны и т. Д., Он просто делает это - клонирует элемент и забывает об этом.

Answer 2

clone () выберите клонированный элемент. В этой инструкции:

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

ясно, что addClass применяется только к клону, т.е. после клона (true) ...,

Answer 3

Функция clone создает новый упакованный набор, состоящий из нового элемента. Функция addClass работает с одним элементом вместо исходного элемента и его клона.

Один из вариантов - позвонить end() после того, как вы применили класс. Эта функция вернет ваш контекст к исходному упакованному набору.

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