jquery 循环动态添加li

原创

mob64ca12e676c8 2023-10-30 07:49:14 ©著作权

文章标签 数组 jQuery 动态添加 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e676c8的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery循环动态添加li

在网页开发中，我们经常会遇到需要动态添加列表项的情况。使用jQuery，我们可以轻松地通过循环动态添加li元素到一个无序列表（ul）中。本文将介绍如何使用jQuery进行循环动态添加li的操作，并提供相应的代码示例。

什么是jQuery？

jQuery是一个著名的JavaScript库，提供了简化HTML文档遍历、事件处理、动画效果和Ajax交互的功能。它的设计目标是使Web开发更加快捷、方便。通过使用jQuery，我们可以使用简洁的语法来完成复杂的操作，提高开发效率。

循环动态添加li元素

在很多情况下，我们需要通过循环来动态地添加多个li元素到一个无序列表中。比如，我们有一个数组，数组的每个元素代表一个数据项，我们需要将数组中的每个元素都添加为一个li元素到一个无序列表中。

首先，我们需要在HTML中创建一个无序列表，这里我们使用一个id为“list”的ul元素：

<ul id="list"></ul>

接下来，我们使用JavaScript创建一个数组，数组中包含需要添加的数据项：

var data = ['Apple', 'Banana', 'Orange'];

然后，我们可以使用jQuery中的.each()方法对数组进行遍历，并通过动态创建li元素的方式将数组中的每个元素添加到无序列表中。代码如下：

$.each(data, function(index, item) {
  $('#list').append('<li>' + item + '</li>');
});

上述代码首先使用.each()方法对数组data进行遍历，遍历过程中的回调函数会分别传递每个元素的索引和值。在回调函数中，我们使用$('#list').append()方法将当前元素添加为一个li元素到无序列表中。

最终的效果是，无序列表中会动态地添加三个li元素，分别显示数组中的每个数据项。

完整示例代码

下面是一个完整的示例代码，包含了HTML、JavaScript和CSS的部分：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery循环动态添加li</title>
  <style>
    ul {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul id="list"></ul>

  <script src="
  <script>
    $(document).ready(function() {
      var data = ['Apple', 'Banana', 'Orange'];

      $.each(data, function(index, item) {
        $('#list').append('<li>' + item + '</li>');
      });
    });
  </script>
</body>
</html>

在上述代码中，我们首先引入了jQuery库，确保可以使用jQuery的相关功能。然后，在文档准备就绪时，即$(document).ready()方法中，我们创建了数组data，并使用.each()方法对数组进行遍历。在遍历过程中，我们将每个元素都添加为一个li元素到无序列表中。