---

前言

前臺接收到的數據即為 data，里面默認在一個 page 頁面顯示的是 6 條數據，個別頁面可能直接取 6 條數據能夠滿足我們的需求，但是如果我們在其他頁面也從 data 中取數據，數據條數就可能不是 6 條（這里僅說明<=6條的情況——根據實體類的定義走），當我們直接使用 jquery 進行 each 遍歷的時候，直接遍歷的結果就是 6 條，很有可能就不滿足我們的需求，所以，如果在不改變實體類、CSS 樣式的情況下，對在 jquery 中獲取 each 的遍歷次數的控制就是最好的實現方法。

---

一、項目場景分析

今天在做一個項目時，遇到了列表遍歷的一個問題：定義一個實體類 Page，數據寫死，默認每頁顯示 6 條數據，通過 service 處理 dao 查詢數據庫的結果，在當前 new 的對象 page 中存放 6 條數據并返給 servlet，servlet 通過返回 json 的形式將 page 對象返回給前臺。

前臺接收到的數據即為 data，里面默認在一個 page 頁面顯示的是 6 條數據，個別頁面可能直接取 6 條數據能夠滿足我們的需求，但是如果我們在其他頁面也從 data 中取數據，數據條數就可能不是 6 條（這里僅說明 <= 6 條的情況——根據實體類的定義走），當我們直接使用 jquery 進行 each 遍歷的時候，直接遍歷的結果就是 6 條，很有可能就不滿足我們的需求，所以，如果在不改變實體類、CSS 樣式的情況下，對在 jquery 中獲取 each 的遍歷次數的控制就是最好的實現方法。

二、實體類定義描述（僅關鍵代碼）

2.1、實體類定義描述

我們對數據進行分頁操作，定義一個實體類 Page，數據寫死，默認每頁顯示 6 條數據，代碼如下：

public class Page {private Integer totalPage;// 總頁數private Integer totalCount;// 總數據條數private Integer currentPage;// 當前頁碼private Integer pageCount = 6;// 每頁顯示條數private List<Route> list;// 每頁實際路線數據
}

2.2、邏輯處理與分析

通過 dao 從數據庫查詢數據，由 service 進行處理分頁邏輯并將數據 return 給 servlet，代碼如下：

public Page pageQuery(String cid, int cp) {Page page = new Page();//封裝5個數據//總條數int totalCount = dao.findTotalCount(cid);page.setTotalCount(totalCount);//當前頁碼page.setCurrentPage(cp);//每頁顯示條數//固定每頁顯示6條//總頁數/*** 總條數	每頁顯示條數	總頁數* 29		6		5* 30		6		5* 31		6		6*/int totalPage;if (totalCount % 6 == 0) {totalPage = totalCount / 6;}else {totalPage = totalCount / 6 + 1;}page.setTotalPage(totalPage);//每頁實際數據List<Route> list = dao.findList(cid,cp,page.getPageCount());page.setList(list);return page;
}

servlet 將獲取到的 page 對象變成 json 形式的字符串發送給前臺，前臺即接收到處理后的數據 data，代碼如下：

Page page = service.pageQuery(cid,cp);
//把數據傳給前臺
ObjectMapper om = new ObjectMapper();
//把對象變成json形式的字符串
String s = om.writeValueAsString(page);
//發送給前臺
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(s);

我們直接使用 jquery 進行 each 遍歷的時候，直接遍歷的結果就是 6 條，代碼如下：

//在添加之前清空之前的數據
$("#popularityroute").html("");
$(data.list).each(function(index,element){var li = '<div class="col-md-3">\n'+'<a href="javascript:;">\n'+'<img src="images/jiangxuan_4.jpg" alt="">\n'+'<div class="has_border">\n'+'<h3>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</h3>\n'+'<div class="price">網付價<em>￥</em><strong>1</strong><em>起</em></div>\n'+'</div>\n'+'</a>\n'+'</div>';//添加到ul里面$("#popularityroute").append(li);
})

遍歷結果如下圖所示：

2.3、遍歷數據如何修改的問題暴露

但是如果我們在其他頁面也從 data 中取數據，數據條數就可能不是 6 條（這里僅說明 <=6 條的情況——根據實體類的定義走），當我們直接使用 jquery 進行 each 遍歷的時候，直接遍歷的結果就是 6 條，很有可能就不滿足我們的需求。我們就需要取 4 條數據顯示在本頁面，如下圖所示：

而如果不對遍歷結果進行處理，就是這樣的情況，如下圖所示：

很明顯，這是完全不符合我們需求的，這破壞了頁面的結構，小心被前端程序員打死哦！

那么為了避免矛盾產生作為 Java 程序員的我們就要對遍歷的結果進行處理了。

三、處理思路

3.1、源碼分析 jQuery 中的 each 遍歷

首先我們先來熟悉一下這個 jquery 中的 each 遍歷，代碼如下：

//在添加之前清空之前的數據
$("#popularityroute").html("");
$(data.list).each(function(index,element){var li = '<div class="col-md-3">\n'+'<a href="javascript:;">\n'+'<img src="images/jiangxuan_4.jpg" alt="">\n'+'<div class="has_border">\n'+'<h3>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</h3>\n'+'<div class="price">網付價<em>￥</em><strong>1</strong><em>起</em></div>\n'+'</div>\n'+'</a>\n'+'</div>';//添加到ul里面$("#popularityroute").append(li);
})

我們通過console.log來輸出一下返給前臺數據data的內容，一共是 5 個參數，包含一個存了 6 條數據的list集合，如下圖所示：

通過data.list來獲取list的參數，我們再通過console.log來輸出一下list的內容以及index索引，每個list即為一個li，由于數據并未處理，所以是 6 條相同的數據，而現在我們僅需要顯示前 4 條數據即可，如下圖所示：

3.2、如何解決 jQuery 中控制獲取 each 的遍歷次數

顯而易見，現在我們只需要對數據的索引進行判斷即可。比如如上頁面我們僅需要前 4 條數據，我們就可以通過控制索引的值來控制顯示數據的條數——達到設定索引值結束遍歷。如下圖所示：

解決方式：index 的索引默認是從 0 開始計，顯示 4 條數據我們只需要在索引值達到 3 時把遍歷停掉即可：

if(index>3){return true;
}

補充：這里使用了 jquery 跳出 each 循環的功能。我們在 Java 中熟悉的是 break 和 continue。

而在 jquery 中使用的是：

• return false——跳出所有循環；相當于 javascript 中的 break 效果
• return true——跳出當前循環，進入下一個循環；相當于 javascript 中的 continue 效果

這樣就滿足了我們的需求，同時也不改變后端邏輯與代碼，也不會破壞前端頁面結構，結果如下圖所示：

---

總結

優點：通過這個方法，我們基本就可以忽略在實體類中定義的默認一個 page 顯示多少條數據的約束，以實體類中的約束作為最大限制即可，只要是在這個范圍內的數據我們都可以控制和取到。既也不改變后端邏輯與代碼，也不會破壞前端頁面結構。 缺點：多余的數據會被隱藏掉，所以在分頁中不建議使用，會造成丟失數據的情況。如果僅使用前幾條數據進行限制還是沒有任何問題的。

---

我是白鹿，一個不懈奮斗的程序猿。望本文能對你有所裨益，歡迎大家的一鍵三連！若有其他問題、建議或者補充可以留言在文章下方，感謝大家的支持！