jQuery循环写入li

jQuery是一种流行的JavaScript库，它使得在网页上使用JavaScript变得更加简单。其中一个常见的应用场景是循环写入标签元素，比如在一个无序列表中添加多个li元素。本文将介绍如何使用jQuery循环写入li，并提供相应的代码示例。

前提条件

在开始之前，你需要在你的网页中引入jQuery库。你可以通过以下方式在HTML中引入jQuery：

<script src="

使用jQuery循环写入li

下面是一个使用jQuery循环写入li的示例代码：

$(document).ready(function() {
  var fruits = ["苹果", "香蕉", "橙子", "葡萄"];

  $.each(fruits, function(index, fruit) {
    $("ul").append("<li>" + fruit + "</li>");
  });
});

在这个示例中，我们首先定义了一个包含多个水果的数组fruits。然后，使用$.each()函数遍历数组中的每个元素。$.each()函数接受两个参数：要遍历的数组和一个回调函数。回调函数的第一个参数是当前元素在数组中的索引，第二个参数是当前元素的值。在回调函数中，我们使用$("ul").append()函数将每个水果写入ul元素中。

示例效果

下面是一个使用上述代码的完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>循环写入li示例</title>
  <script src="
  <style>
    ul {
      list-style: none;
    }
  </style>
</head>
<body>
  <ul></ul>

  <script>
    $(document).ready(function() {
      var fruits = ["苹果", "香蕉", "橙子", "葡萄"];

      $.each(fruits, function(index, fruit) {
        $("ul").append("<li>" + fruit + "</li>");
      });
    });
  </script>
</body>
</html>

运行这个示例，你将会看到一个无序列表中包含了四个水果项。

总结

通过使用jQuery的$.each()函数，我们可以很方便地循环遍历一个数组并将其中的元素写入HTML页面。这样的功能在很多场景下都非常有用，比如根据后台返回的数据动态生成列表或菜单。希望本文提供的示例对你理解如何使用jQuery循环写入li有所帮助。

附录

代码示例

以下是上述示例中的代码示例：

$(document).ready(function() {
  var fruits = ["苹果", "香蕉", "橙子", "葡萄"];

  $.each(fruits, function(index, fruit) {
    $("ul").append("<li>" + fruit + "</li>");
  });
});

表格

下面是一个使用表格展示水果的示例：

水果名称
苹果
香蕉
橙子
葡萄

饼状图

下面是一个使用mermaid语法绘制的饼状图示例：

pie
    "苹果": 40
    "香蕉": 20
    "橙子": 25
    "葡萄": 15

这个饼状图表示了四种水果的比例分布情况。