所属分类：web前端开发
jQuery是一款非常流行的JavaScript库，用于简化HTML文档操作和事件处理。其中一个常见的操作是替换HTML列表项（li）的内容，在本文中我们将详细介绍如何使用jQuery完成这个操作。
首先，我们需要一个基本的HTML文档，包含一个无序列表，每个列表项都包含一些文本内容。以下是一个示例HTML文档：
微博登录
QQ登录<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
</html>登录后复制在上述HTML代码中，我们包含了一个jQuery的CDN（内容分发网络）链接。这个链接将让我们能够在本地编写使用jQuery的JavaScript代码。
现在，我们将写一些jQuery代码来替换第二个列表项的内容。首先，我们需要为第二个列表项添加一个唯一的ID属性，以便我们可以在jQuery中引用它。以下是将ID属性添加到第二个列表项的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li id="list-item-2">列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script>
$(document).ready(function() {
$('#list-item-2').html('替换后的内容');
});
</script>
</body>
</html>登录后复制在上述代码中，我们将$（document）.ready（）函数用来确保我们的代码只有在HTML文档加载完成后才运行。然后，我们使用$（'#list-item-2'）选择器来选取具有ID“list-item-2”的列表项，使用html（）方法将其内容替换为“替换后的内容”。
现在，我们将看到第二个列表项的文本已被替换为“替换后的内容”。
如果我们要一次替换多个列表项的内容，我们可以使用jQuery的each（）方法。以下是一个示例代码，用于将第2和第4个列表项的内容替换为新的文本：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li id="list-item-2">列表项2</li>
<li>列表项3</li>
<li id="list-item-4">列表项4</li>
<li>列表项5</li>
</ul>
<script>
$(document).ready(function() {
var newItemText = '新的文本';
$('#list-item-2, #list-item-4').each(function() {
$(this).html(newItemText);
});
});
</script>
</body>
</html>登录后复制在上面的代码中，我们创建了一个新的变量newItemText，包含要替换的文本。然后，我们使用$（'#list-item-2，#list-item-4'）选择器选择第2和第4个列表项，并使用.each（）方法为每个匹配项执行函数。在这个函数中，我们将列表项的内容替换为新文本。
总结一下，我们在本文中学习了如何使用jQuery替换HTML列表项（li）的内容。无论是替换单个列表项还是一次替换多个列表项，都可以使用jQuery的html（）方法和each（）方法来完成。现在我们可以轻松地操作HTML文档中的元素，为我们的用户提供更好的用户体验。
以上就是jquery 替换 li内容的详细内容，更多请关注zzsucai.com其它相关文章！
