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

clone函数创建一个由新元素组成的新包装集。 addClass函数在单个元素上运行，而不是在原始项目及其克隆上运行。

另一种方法是在申请课程后致电end()。此函数会将您的上下文设置回原始包装集。

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

Answer 2

'span.page-number:first'

展开选择器。现在它选择所有span.page-number然后选择第一个。如果你做了像

这样的事情

"div span.pagenumber:first"

它可能会起作用。

更新如下所述，克隆只复制它不会从这一点跟踪所有克隆等的元素，它就是这样做 - 克隆元素并忘记它。

Answer 3

clone（）选择克隆元素。在这条指令中：

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

很明显，addClass仅适用于克隆，即克隆（true）...，

之后

代理cloned（）jQuery元素

3 个答案: