使用 jQuery 循环处理列表元素（li）
在网页开发中，处理 HTML 元素是一项非常常见的需求。其中，列表（<ul> 或 <ol>）中的子元素（<li>）经常需要进行动态操作，比如添加、删除或修改。jQuery 是一个功能强大的 JavaScript 库，可以帮助开发者轻松地处理这些操作。本文将为您介绍如何使用 jQuery 循环遍历列表中的 <li> 元素，并进行一些基本的操作。
jQuery 简介
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它极大简化了 HTML 文档遍历和操作、事件处理、动画以及 Ajax 的使用，使开发者可以用更少的代码实现更多的功能。由于其简单易用，jQuery 在前端开发中得到了广泛应用。
HTML 列表结构
首先，我们需要一个简单的 HTML 列表结构。在本文中，我们将创建一个包含五个项目的无序列表：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 列表循环示例</title>
<script src="
</head>
<body>
我的旅行清单
<ul id="travel-list">
<li>去巴黎</li>
<li>去伦敦</li>
<li>去纽约</li>
<li>去东京</li>
<li>去巴萨</li>
</ul>
<button id="add-item">添加项目</button>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个 ID 为 travel-list 的无序列表，其中包含了几个旅行项目。同时，我们也添加了一个按钮，用户可以通过点击这个按钮来添加新的旅行项目。
使用 jQuery 循环遍历列表
接下来，我们将编写 jQuery 代码，以循环遍历 <li> 元素并对它们进行操作。我们首先需要在 script.js 文件中实现这一功能。
$(document).ready(function() {
// 遍历列表中的每一个 li 元素
$('#travel-list li').each(function(index) {
// 获取当前项的文本
const itemText = $(this).text();
// 在控制台输出索引和文本
console.log('索引: ' + index + ', 项目: ' + itemText);
});
// 添加新的项目
$('#add-item').click(function() {
const newItem = prompt('请输入新项目:');
if (newItem) {
$('#travel-list').append('<li>' + newItem + '</li>');
}
});
});
在这个示例中，我们首先使用 $(document).ready() 确保 DOM 完全加载后再开始执行脚本。然后我们利用 jQuery 的 each() 方法遍历所有的 <li> 元素。每次遍历时，我们获取当前项的文本并在控制台打印出来。
添加新项目
我们还为按钮设置了点击事件处理器。当用户点击按钮时，会弹出一个输入框来获取新项目的名称，并将其添加到列表中。
示例效果
运行上述代码后，您会看到一个旅行清单。打开浏览器的开发者工具，您将能够在控制台中看到列表项的索引和相应的文本。当您点击“添加项目”按钮时，您可以输入一个新项目，并将其添加到列表中。
可视化旅行计划
使用 Mermaid 语法的图表可以让我们的旅行计划更加生动。以下是一个简单的旅行计划示例，描述了我们在不同城市的行程：
journey
title 我的旅行计划
section 第一天
到达巴黎: 5: 旅程愉快
游览埃菲尔铁塔: 4: 风景优美
section 第二天
前往伦敦: 5: 期待已久
游览大本钟: 5: 令我惊叹
section 第三天
前往纽约: 5: 令人兴奋
游览自由女神像: 5: 带来灵感
section 第四天
前往东京: 4: 新文化体验
游览东京塔: 3: 日本精神
section 第五天
前往巴萨: 5: 享受阳光
游览高迪建筑: 5: 艺术的奇迹
此图展示了我们在旅行过程中访问不同城市的活动，以及我们的体验评分。你可以将其放置在适当的位置，以增强整篇文章的可读性与趣味性。
总结
jQuery 使得对网页元素的操作变得简单而高效，特别是在处理列表元素时，通过使用 .each() 方法可以轻松地遍历和修改它们。本文介绍的旅行清单示例展示了如何添加新项目，以及如何使用 jQuery 的基本功能。希望这篇文章能够帮助您更好地理解 jQuery 的列表操作，激发您在网页开发中的创造力。
无论您是一个初学者还是有一定经验的开发者，掌握 jQuery 的这些基础功能都会让您的网页开发工作更加得心应手。尝试将这些示例应用到自己的项目中，相信您会发现更多有趣的功能和可能性！
