jQuery 遍历：思路总结，项目场景中如何处理 控制获取的 each 遍历次数？_jx each循环次数怎么获取

一、项目场景分析

今天在做一个项目时，遇到了列表遍历的一个问题：定义一个实体类 Page，数据写死，默认每页显示 6 条数据，通过 service 处理 dao 查询数据库的结果，在当前 new 的对象 page 中存放 6 条数据并返给 servlet，servlet 通过返回 json 的形式将 page 对象返回给前台。

前台接收到的数据即为 data，里面默认在一个 page 页面显示的是 6 条数据，个别页面可能直接取 6 条数据能够满足我们的需求，但是如果我们在其他页面也从 data 中取数据，数据条数就可能不是 6 条（这里仅说明

二、实体类定义描述（仅关键代码）

2.1、实体类定义描述

我们对数据进行分页操作，定义一个实体类 Page，数据写死，默认每页显示 6 条数据，代码如下：

public class Page {
	private Integer totalPage;// 总页数
	private Integer totalCount;// 总数据条数
	private Integer currentPage;// 当前页码
	private Integer pageCount = 6;// 每页显示条数

	private List 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 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 = '
n'+
            'n'+
          	'n'+
            '
n'+
          	'
上海直飞三亚 5 天 4 晚自由行(春节预售 + 亲子 / 蜜月 / 休闲游首选 + 豪华酒店任选 + 接送机)
n'+
            '
网付价 ￥1 起
n'+
        	'
n'+
            'n'+
  			'
';
	// 添加到 ul 里面
	$("#popularityroute").append(li);
})

遍历结果，具体如下图所示：

2.3、遍历数据如何修改的问题暴露

但是如果我们在其他页面也从 data 中取数据，数据条数就可能不是 6 条（这里仅说明

而如果不对遍历结果进行处理，就是这样的情况，具体如下图所示：

很明显，这是完全不符合我们需求的，这破坏了页面的结构，小心被前端程序员打死哦！

那么为了避免矛盾产生作为 Java 程序员的我们就要对遍历的结果进行处理了。

三、处理思路

3.1、源码分析 jQuery 中的 each 遍历

首先我们先来熟悉一下这个 jQuery 中的 each 遍历，代码如下：

// 在添加之前清空之前的数据
$("#popularityroute").html("");
$(data.list).each(function(index,element){var li = '
n'+
    		'n'+
            'n'+
            '
n'+
            '
上海直飞三亚 5 天 4 晚自由行(春节预售 + 亲子 / 蜜月 / 休闲游首选 + 豪华酒店任选 + 接送机)
n'+
            '
网付价 ￥1 起
n'+
            '
n'+
            'n'+
            '
';
	// 添加到 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 效果。

这样就满足了我们的需求，同时也不改变后端逻辑与代码，也不会破坏前端页面结构，结果具体如下图所示：

文章作者 ：白鹿第一帅， 作者主页：https://blog.csdn.net/qq_22695001，未经授权，严禁转载，侵权必究！

总结

优点：通过这个方法，我们基本就可以忽略在实体类中定义的默认一个 page 显示多少条数据的约束，以实体类中的约束作为最大限制即可，只要是在这个范围内的数据我们都可以控制和取到。既也不改变后端逻辑与代码，也不会破坏前端页面结构。缺点：多余的数据会被隐藏掉，所以在分页中不建议使用，会造成丢失数据的情况。如果仅使用前几条数据进行限制还是没有任何问题的。