当前位置：首页 > jquery

jquery列表

2026-01-14 15:08:22jquery

jQuery 列表操作

jQuery 提供了多种方法来操作 HTML 列表（如 <ul> 或 <ol>），包括动态添加、删除、修改列表项，以及事件绑定等。

创建列表

使用 jQuery 动态创建一个无序列表：

$('body').append('<ul id="myList"></ul>');

添加列表项

向列表中添加项：

$('#myList').append('<li>Item 1</li>');
$('#myList').append('<li>Item 2</li>');

也可以使用数组动态生成列表项：

const items = ['Apple', 'Banana', 'Orange'];
$.each(items, function(index, value) {
    $('#myList').append('<li>' + value + '</li>');
});

删除列表项

删除特定列表项：

$('#myList li:first').remove(); // 删除第一个项
$('#myList li:last').remove();  // 删除最后一个项
$('#myList li').remove();       // 删除所有项

修改列表项

修改列表项内容或属性：

$('#myList li:eq(1)').text('New Item'); // 修改第二项的文本
$('#myList li').css('color', 'red');    // 修改所有项的样式

事件绑定

为列表项绑定点击事件：

$('#myList').on('click', 'li', function() {
    alert($(this).text());
});

遍历列表

遍历列表项并执行操作：

$('#myList li').each(function(index) {
    console.log(index + ': ' + $(this).text());
});

动态排序列表

对列表项按字母顺序排序：

const listItems = $('#myList li').get();
listItems.sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$.each(listItems, function(index, item) {
    $('#myList').append(item);
});

示例：完整动态列表操作

以下是一个完整的示例，展示如何动态创建列表并操作：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery List Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="addBtn">Add Item</button>
    <button id="removeBtn">Remove Last Item</button>
    <ul id="myList"></ul>

    <script>
        $(document).ready(function() {
            // 初始添加一些项
            $('#myList').append('<li>Apple</li>');
            $('#myList').append('<li>Banana</li>');

            // 点击添加项
            $('#addBtn').click(function() {
                $('#myList').append('<li>New Item</li>');
            });

            // 点击删除最后一项
            $('#removeBtn').click(function() {
                $('#myList li:last').remove();
            });

            // 列表项点击事件
            $('#myList').on('click', 'li', function() {
                $(this).toggleClass('highlight');
            });
        });
    </script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</body>
</html>

通过以上方法，可以灵活地操作和管理 jQuery 列表。

jquery列表