极客笔记jQuery 在 jQuery Mobile 中动态添加
到在本文中，我们将介绍如何使用 jQuery 在 jQuery Mobile 中动态添加 <li/> 到 <ul/> 元素的方法。动态添加列表项是一个常见的需求，它可以让我们在页面中实现动态内容的展示和交互。
阅读更多：jQuery 教程
动态添加
的基本方法要动态添加 <li/> 到 <ul/> 元素，我们首先需要获取到 <ul/> 元素的引用。然后，我们可以使用 jQuery 的 append() 或 prepend() 方法将 <li/> 元素添加到 <ul/> 中。这两个方法分别将新元素添加到列表的末尾和开头。
以下是一个简单的示例代码，演示了如何使用 jQuery 动态添加 <li/> 到 <ul/> 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Dynamically adding <li/> to <ul/> in jquery mobile</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
<body>
<ul id="myList" data-role="listview" data-inset="true">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
(document).ready(function() {('#myList').append('<li>Item 3</li>'); // 动态添加到末尾
('#myList').prepend('<li>Item 0</li>'); // 动态添加到开头('#myList').listview('refresh'); // 刷新列表视图
});
</script>
</body>
</html>
在上面的示例中，我们首先创建了一个空的 <ul/> 元素，并为其添加了一个 id 属性和 jQuery Mobile 的相关属性。然后，我们使用 jQuery 的 append() 和 prepend() 方法分别在列表的末尾和开头添加了新的 <li/> 元素，并调用了 listview('refresh') 方法来刷新列表视图。
现在，如果你在浏览器中打开这个示例页面，你将看到一个包含了动态添加的列表项的列表。
动态添加具有样式的
除了简单添加文本之外，我们还可以动态添加具有样式的 <li/> 元素。在 jQuery Mobile 中，我们可以使用 buttonMarkup() 方法来给列表项添加样式。
以下是一个示例代码，演示了如何在动态添加的 <li/> 元素中应用样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Dynamically adding <li/> to <ul/> in jquery mobile</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
<body>
<ul id="myList" data-role="listview" data-inset="true">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
(document).ready(function() {('#myList').append('<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Item 3</a></li>'); // 动态添加具有样式的列表项
('#myList').prepend('<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Item 0</a></li>');('#myList').listview('refresh'); // 刷新列表视图
});
</script>
</body>
</html>
在上述示例中，我们使用了 jQuery Mobile 的样式类 ui-btn 和 ui-btn-icon-right，以及图标类 ui-icon-carat-r 来给动态添加的列表项添加了样式。运行示例代码后，你将看到列表项具有了按钮样式和右侧的箭头图标。
使用 AJAX 动态加载
数据在实际应用中，我们通常使用 AJAX 来从服务器动态加载数据并将其填充到列表中。在 jQuery Mobile 中，我们可以使用 $.ajax() 方法发送 AJAX 请求，并在请求成功后将数据添加到列表中。
以下是一个示例代码，演示了如何使用 AJAX 动态加载数据并将其填充到 <ul/> 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Dynamically adding <li/> to <ul/> in jquery mobile</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
<body>
<ul id="myList" data-role="listview" data-inset="true">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
(document).ready(function() {.ajax({
url: 'data.json', // 请求的 URL
dataType: 'json', // 响应的数据类型
success: function(data) {
.each(data, function(index, item) {
var li = '<li>' + item.text + '</li>'; // 根据数据创建新的 <li/> 元素('#myList').append(li);
});
$('#myList').listview('refresh'); // 刷新列表视图
}
});
});
</script>
</body>
</html>
在上面的示例中，我们通过 $.ajax() 方法发送一个 AJAX 请求，请求的 URL 是 data.json。这个请求返回的数据是一个 JSON 格式的数组，每个数组元素包含一个文本内容。在请求成功后，我们使用 $.each() 方法遍历数组，为每个数组元素创建一个新的 <li/> 元素，并将其添加到列表中。
总结
本文介绍了如何使用 jQuery 在 jQuery Mobile 中动态添加 <li/> 到 <ul/> 元素的方法。我们学习了基本的动态添加方法，以及如何给列表项添加样式和使用 AJAX 动态加载数据的方法。通过这些方法，我们可以方便地在 jQuery Mobile 中实现动态内容的展示和交互。
希望本文对你理解和使用 jQuery Mobile 中的动态添加列表项有所帮助！