文章目錄

• 前言
• 一、項目場景分析
• 二、實體類定義描述（僅關鍵代碼）
• • 2.1、實體類定義描述
  • 2.2、邏輯處理與分析
  • 2.3、遍歷數(shù)據(jù)如何修改的問題暴露
• 三、處理思路
• • 3.1、源碼分析 jQuery 中的 each 遍歷
  • 3.2、如何解決 jQuery 中控制獲取 each 的遍歷次數(shù)
• 總結(jié)

---

前言

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

---

一、項目場景分析

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

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

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

2.1、實體類定義描述

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

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

2.2、邏輯處理與分析

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

public Page pageQuery(String cid, int cp) {Page page = new Page();//封裝5個數(shù)據(jù)//總條數(shù)int totalCount = dao.findTotalCount(cid);page.setTotalCount(totalCount);//當前頁碼page.setCurrentPage(cp);//每頁顯示條數(shù)//固定每頁顯示6條//總頁數(shù)/*** 總條數(shù) 每頁顯示條數(shù) 總頁數(shù)* 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);//每頁實際數(shù)據(jù)List<Route> list = dao.findList(cid,cp,page.getPageCount());page.setList(list);return page; }

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

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

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

//在添加之前清空之前的數(shù)據(jù) $("#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晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</h3>\n'+'<div class="price">網(wǎng)付價<em>￥</em><strong>1</strong><em>起</em></div>\n'+'</div>\n'+'</a>\n'+'</div>';//添加到ul里面$("#popularityroute").append(li); })

遍歷結(jié)果如下圖所示：

2.3、遍歷數(shù)據(jù)如何修改的問題暴露

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

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

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

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

三、處理思路

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

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

//在添加之前清空之前的數(shù)據(jù) $("#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晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</h3>\n'+'<div class="price">網(wǎng)付價<em>￥</em><strong>1</strong><em>起</em></div>\n'+'</div>\n'+'</a>\n'+'</div>';//添加到ul里面$("#popularityroute").append(li); })

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

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

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

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

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

if(index>3){return true; }

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

而在 jquery 中使用的是：

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

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

---

總結(jié)

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

---

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

總結(jié)

以上是生活随笔為你收集整理的jQuery 遍历：思路总结，项目场景中如何处理/控制获取的 each 遍历次数？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。