javascript - 如何在jquery中的分页号之间添加点（省略号）

Question

我有一个用于分页编号的预生成 html，它基本上来自后端 CMS，基于存在的项目数 html 看起来像这样

<p class="pagination-numbers">
  <a class="" href="/content/go2bank/en/blogs/blog-list-page-1.html"> 1 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.2.html"> 2 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.3.html"> 3 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.4.html"> 4 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.5.html"> 5 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.6.html" class="active"> 6 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.7.html"> 7 </a>
</p>

页数可能会根据项目的数量而增加，因此目前数字显示全部（例如：1 2 3 4 5 6 7）

我希望它不显示所有数字，而是显示一些数字，即前几个数字，然后用“...”替换其余数字，最后一个应该显示。

我希望分页看起来和表现得像这样

Selected page 1: [1, 2, 3, 4, "...", 20]
selected page 2: [1, 2, 3, 4, "...", 20]
selected page 3: [1, 2, 3, 4, "...", 20]
selected page 4: [1, "...", 3, 4, 5, "...", 20]
selected page 5: [1, "...", 4, 5, 6, "...", 20]
.
.
.
.
.
selected page 18:[1, "...", 17, 18 ,19 , 20]
selected page 19:[1, "...", 17, 18 ,19 , 20]
selected page 20:[1, "...", 17, 18 ,19 , 20]

提前致谢

标签： javascripthtmljquery

Answer 1

像这样的东西？

const act = $(".pagination-numbers a.active").index()
$(".pagination-numbers a:visible").each(function() {$(this).after('<span>.</span>') })
$(".pagination-numbers a:lt("+(act-1)+")").hide(); // one before 
$(".pagination-numbers a:gt("+(act+1)+")").hide(); // one after


$(".pagination-numbers a:first").show()
$(".pagination-numbers a:last").show()
$(".pagination-numbers span:last").hide()

a { text-decoration: none }
.active {font-weight: bold }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="pagination-numbers">
  <a class="" href="/content/go2bank/en/blogs/blog-list-page-1.html"> 1 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.2.html"> 2 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.3.html"> 3 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.4.html"> 4 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.5.html"> 5 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.6.html"> 6 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.7.html" class="active"> 7 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.8.html"> 8 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.9.html"> 9 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.10.html"> 10 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.11.html"> 11 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.12.html"> 12 </a>
  <a href="/content/go2bank/en/blogs/blog-list-page-1.13.html"> 13 </a>
</p>