jquery 替换 li内容-前端问答-PHP中文网

jquery 替换 li内容

WBOY

发布： 2023-05-08 21:20:36

原创

562人浏览过

jquery是一款非常流行的javascript库，用于简化html文档操作和事件处理。其中一个常见的操作是替换html列表项（li）的内容，在本文中我们将详细介绍如何使用jquery完成这个操作。

首先，我们需要一个基本的HTML文档，包含一个无序列表，每个列表项都包含一些文本内容。以下是一个示例HTML文档：

<!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（）方法将其内容替换为“替换后的内容”。

现在，我们将看到第二个列表项的文本已被替换为“替换后的内容”。

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

如果我们要一次替换多个列表项的内容，我们可以使用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内容的详细内容，更多请关注php中文网其它相关文章！