<think>我们注意到用户的问题是关于在Thymeleaf模板中使用
jQuery的`
$.each`方法遍历数据并展示。虽然Thymeleaf本身提供了`th:
each`进行遍历，但有时我们可能需要在客户端使用JavaScript（特别是
jQuery）来动态处理数据。以下是如何在Thymeleaf中结合使用`
$.each`进行数据遍历的步骤：
### 1
. 后端准备数据
首先，后端需要将数据作为模型属性传递给Thymeleaf模板。例如，我们传递一个用户列表：
```java
@Controller
public class UserController {
@GetMapping
("/users"
)
public String getUsers
(Model model
) {
List<User> userList = Arrays
.asList
(
new User
(1, "Alice", "123456", "Beijing"
),
new User
(2, "Bob", "654321", "Shanghai"
)
);
model
.add
Attribute
("users", userList
);
return "users";
}
}
```
### 2
. 前端使用Thymeleaf和
jQuery
在Thymeleaf模板中，我们可以使用以下两种方式之一来使用`
$.each`遍历数据：
#### 方式一：将数据作为JavaScript变量
使用Thymeleaf的内联表达式将服务器端的数据转换为JavaScript变量，然后使用`
$.each`遍历。
```html
<!DOCTYPE html>
<html xmlns:th="http://www
.thymeleaf
.org">
<head>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<div id="user-list"></div>
<script th:inline="javascript">
/*<![CDATA[*/
$(function() {
// 使用Thymeleaf内联获取数据
var users = /*[[
${users}]]*/ [];
// 使用
jQuery的
$.each遍历
$.each(users,
function(index, user
) {
var userHtml = '<div>' +
'<span>' + user
.id + '</span> ' +
'<span>' + user
.name + '</span> ' +
'<span>' + user
.phone + '</span> ' +
'<span>' + user
.address + '</span>' +
'</div>';
$('#user-list'
).append
(userHtml
);
}
);
}
);
/*]]>*/
</script>
</body>
</html>
```
#### 方式二：从隐藏域中获取数据
如果数据量较大或者需要避免在JavaScript代码中直接暴露数据结构，可以将数据放入隐藏域，然后使用
jQuery获取并解析。
```html
<body>
<!-- 将数据存储在隐藏域中，使用Thymeleaf的th:
attr设置
value -->
<input type="hidden" id="users-data" th:
value="
${#strings
.escapeJava
(#strings
.toString
(users
))}" />
<div id="user-list"></div>
<script>
$(function() {
// 从隐藏域获取数据字符串
var usersJson =
$('#users-data'
).val
();
// 解析为JSON对象
var users = JSON
.parse
(usersJson
);
// 使用
$.each遍历
$.each(users,
function(index, user
) {
$('#user-list'
).append
(
$('<div>'
).append
(
$('<span>'
).text
(user
.id
),
$('<span>'
).text
(user
.name
),
$('<span>'
).text
(user
.phone
),
$('<span>'
).text
(user
.address
)
)
);
}
);
}
);
</script>
</body>
```
### 3
. 注意事项
- **数据转义**：在方式一中，Thymeleaf内联表达式会自动处理一些转义，但要注意如果数据中包含特殊字符（如引号），可能会破坏JavaScript结构。方式二通过隐藏域和`escapeJava`可以更好地处理特殊字符。
- **性能考虑**：如果数据量很大，使用`
$.each`遍历可能会影响页面加载性能，建议使用分页或虚拟滚动。
- **Thymeleaf的表达式**：在JavaScript内联中，使用`/*[[
${data}]]*/`的语法，其中`/*[[
...]]*/`是Thymeleaf的安全内联语法，当模板静态打开时，`/*[[
${data}]]*/`后面的空数组`[]`会作为默认值，而在服务器渲染时会被替换。
### 4
. 示例：遍历Map
如果数据是Map类型，也可以使用`
$.each`遍历：
```html
<script th:inline="javascript">
var userMap = /*[[
${userMap}]]*/ {};
$.each(userMap,
function(key,
value) {
console
.log
(key + ": " +
value.name
);
}
);
</script>
```
### 5
. 结合Thymeleaf的服务器端渲染和客户端处理
这种方式适用于需要同时利用Thymeleaf的服务器端渲染能力和客户端的动态交互。例如，初始数据由服务器渲染，后续的更新通过Ajax加载并用`
$.each`动态添加。
### 总结
在Thymeleaf模板中使用
jQuery的`
$.each`遍历数据的关键步骤：
1
. 将服务器端的数据通过Thymeleaf内联表达式或隐藏域传递给JavaScript。
2
. 在页面加载完成后，使用`
$.each`遍历数据并动态生成DOM元素插入页面。
这种方式结合了服务器端模板引擎和客户端脚本的优势，适用于需要动态操作数据的场景[^1][^2][^5]。
---
### §§相关问题§§
1
. 如何在Thymeleaf中使用Ajax动态加载数据并利用`
$.each`展示？
2
. Thymeleaf内联表达式处理复杂数据结构（如嵌套对象）时有哪些注意事项？
3
. 如何优化Thymeleaf中大数据量的前端渲染性能？</think>在 Thymeleaf 模板中使用
jQuery 的 `
$.each()` 方法遍历数据并展示，可以通过以下步骤实现：
### 一、基本实现步骤
#### 1
. 后端准备数据
(Spring Boot
)
```java
@Controller
public class UserController {
@GetMapping
("/users"
)
public String getUsers
(Model model
) {
List<User> userList = Arrays
.asList
(
new User
(1, "Alice", "123456", "Beijing"
),
new User
(2, "Bob", "654321", "Shanghai"
)
);
model
.add
Attribute
("users", userList
); // 传递用户列表到前端
return "user-page";
}
}
```
#### 2
. 前端使用 Thymeleaf +
jQuery 遍历展示
```html
<!DOCTYPE html>
<html xmlns:th="http://www
.thymeleaf
.org">
<head>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<!-- 使用Thymeleaf将数据注入JavaScript -->
<script th:inline="javascript">
/*<![CDATA[*/
// 将服务器端数据转换为JavaScript变量
const userData = /*[[
${users}]]*/ [];
$(document
).ready
(function() {
// 使用
jQuery的
$.each遍历数据
$.each(userData,
function(index, user
) {
// 创建并添加DOM元素
$("#user-list"
).append
(`
<div class="user-item">
<span>ID:
${user
.id}</span>
<span>Name:
${user
.name}</span>
<span>Phone:
${user
.phone}</span>
<span>Address:
${user
.address}</span>
</div>
`
);
}
);
}
);
/*]]>*/
</script>
<!-- 展示区域 -->
<div id="user-list"></div>
</body>
</html>
```
### 二、关键技术解析
1
. **数据传递方式**：
- 使用 Thymeleaf 的 `th:inline="javascript"` 将服务器数据注入 JavaScript 变量
- `const userData = /*[[
${users}]]*/ [];` 语法确保：
- 服务器渲染时：注入真实数据
- 静态打开时：使用空数组兜底 [^1]
2
. **
$.each() 遍历方法**：
```javascript
$.each(collection,
function(index, item
) {
//
index: 当前索引
// item: 当前数据项
}
);
```
3
. **动态创建 DOM 元素**：
- 使用
jQuery 的 `append
()` 方法动态添加元素
- 使用模板字符串简化 HTML 拼接
### 三、处理不同数据结构
#### 1
. 遍历数组
```javascript
const colors = ["Red", "Green", "Blue"];
$.each(colors,
function(i, color
) {
$("#color-list"
).append
(`<li>
${i+1}
. ${color}</li>`
);
}
);
```
#### 2
. 遍历对象列表
```javascript
$.each(userData,
function(i, user
) {
$("#user-list"
).append
(`
<tr>
<td>
${user
.id}</td>
<td>
${user
.name}</td>
<td>
${user
.phone}</td>
</tr>
`
);
}
);
```
#### 3
. 遍历 Map 对象
```java
// 后端传递Map数据
Map<String, String> settings = new HashMap<>
();
settings
.put
("theme", "dark"
);
settings
.put
("language", "zh-CN"
);
model
.add
Attribute
("appSettings", settings
);
```
```javascript
// 前端遍历Map
const settings = /*[[
${appSettings}]]*/ {};
$.each(settings,
function(key,
value) {
$("#settings"
).append
(`<div>
${key}:
${
value}</div>`
);
}
);
```
### 四、结合 Thymeleaf 特性
1
. **条件渲染**：
```javascript
$.each(userData,
function(i, user
) {
let vipClass = user
.vip ? "vip-user" : "";
$("#user-list"
).append
(`
<div class="user
${vipClass}">
<!-- 内容 -->
</div>
`
);
}
);
```
2
. **使用 Thymeleaf 表达式**：
```javascript
$.each(userData,
function(i, user
) {
$("#user-list"
).append
(`
<a th:href="@{/profile
(id=
${user
.id}
)}">
View Profile
</a>
`
);
}
);
```
3
. **处理图片资源**：
```javascript
$.each(products,
function(i, product
) {
$("#product-grid"
).append
(`
<div class="product">
<img th:src="@{/images/} +
${product
.imagePath}"
alt="
${product
.name}">
<h3>
${product
.name}</h3>
</div>
`
);
}
);
```
### 五、性能优化技巧
1
. **文档片段优化**：
```javascript
// 创建文档片段减少重绘次数
const fragment = document
.createDocumentFragment
();
$.each(userData,
function(i, user
) {
const div = document
.create
Element('div'
);
div
.innerHTML = `<span>
${user
.name}</span>`;
fragment
.appendChild
(div
);
}
);
$("#user-list"
).append
(fragment
);
```
2
. **分页加载**：
```javascript
let currentPage = 1;
const pageSize = 10;
function loadPage
(page
) {
$.get
(`/api/users?page=
${page}&size=
${pageSize}`,
function(data
) {
$("#user-list"
).empty
();
$.each(data
.content,
function(i, user
) {
// 渲染用户项
}
);
}
);
}
```
3
. **虚拟滚动**：
```javascript
$("#scroll-container"
).scroll
(function() {
if
($(this
).scrollTop
() +
$(this
).innerHeight
() >= this
.scrollHeight
) {
loadNextPage
();
}
}
);
```
### 六、常见问题解决
1
. **特殊字符转义**：
```javascript
$.each(comments,
function(i, comment
) {
const safeText =
$("<div>"
).text
(comment
.content
).html
();
$("#comments"
).append
(`<div>
${safeText}</div>`
);
}
);
```
2
. **处理空数据**：
```javascript
if
(userData
.length === 0
) {
$("#user-list"
).html
('<div class="empty">No users found</div>'
);
} else {
$.each(userData,
function(i, user
) {
// 渲染数据
}
);
}
```
3
. **性能监控**：
```javascript
console
.time
('renderUsers'
);
$.each(userData,
function(i, user
) {
// 渲染代码
}
);
console
.timeEnd
('renderUsers'
); // 输出渲染耗时
```
### 七、
与 Thymeleaf th:
each 对比
| 特性 | `
$.each()` | `th:
each` |
|------|------------|-----------|
| 执行时机 | 客户端渲染 | 服务器端渲染 |
| 数据依赖 | 需额外注入JS | 直接访问模型属性 |
| SEO友好性 | 较低 | 较高 |
| 动态更新 | 支持Ajax更新 | 需刷新页面 |
| 初始加载 | 可能闪烁 | 立即显示 |
| 复杂度 | 需JS/CSS知识 | 纯HTML模板 |
这种方案适合需要动态交互的场景，如过滤、排序、分页等操作[^2][^5]。对于静态内容展示，使用 Thymeleaf 的 `th:
each` 更高效[^1][^3]。
---
###
本文介绍了如何使用jQuery的$.each方法来遍历数组和对象，并展示了如何通过返回false来提前终止循环，以及如何通过索引来获取元素。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
