Question

我使用Bootpag分页和ajax调用，我正在寻找一种方法来添加rel =＆＃39; next＆＃39;的rel =＆＃39;分组＆＃39;对于这些链接，我基于一个活跃的＆＃39;添加它们。上课＆＃39; prev＆＃39;所有以前的链接和＆＃39; next＆＃39;在所有下一个链接上但是当我使用分页时，属性不会改变。

代码了解其他属性

if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').prevAll().attr("rel","prev");
 }
 if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').nextAll().attr("rel","next");
 }

分页代码

$('#pagination_container').bootpag({
    total: ${myOrdersData.totalNumberOfPages},
    leaps: true,
    firstLastUse: true,
    first: '| &lt;',
    last: '&gt; |',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
})
  .on("page", function(event, /* page number here */ num){
    $.ajax({
      type:"get",
      url: "ordersByPageNumber?pageNumber="+num,
    })
    .done(function(data) {
     $("#previousOrders").html( data );
    });
  });

分页工作正常，只是在链接上添加了rel属性。

编辑澄清

<ul class="pagination bootpag">
<li data-lp="1" class="first" rel="prev">
  <a href="javascript:void(0);">| &lt;</a>
</li>
<li data-lp="1" class="prev" rel="prev">
  <a href="javascript:void(0);">&lt;</a>
</li>
<li data-lp="1" class="">
  <a href="javascript:void(0);">1</a>
</li>
<li data-lp="2" rel="next" class="active">
  <a href="javascript:void(0);">2</a>
</li>
<li data-lp="3" rel="next">
  <a href="javascript:void(0);">3</a>
</li>
<li data-lp="3" class="next" rel="next">
  <a href="javascript:void(0);">&gt;</a>
</li><li data-lp="3" class="last" rel="next">
  <a href="javascript:void(0);">&gt; |</a>
</li>
</ul>

Answer 1

根据上面的代码，您的“＆＃39;页面＆＃39;事件处理程序：

.on("page", function(event, /* page number here */ num){

    var $lis = $('.bootpag li').not('.first, .last, .prev, .next'),
        $active = $('.bootpag li.active');

    $lis.removeAttr('rel');
    $active.prev().attr('rel', 'prev');
    $active.next().attr('rel', 'next');

    ...the rest of your code

将SEO =属性添加到Bootpag Pagination for SEO

1 个答案: