当前位置：首页 > jquery

jquery 列表

2026-03-02 12:37:49jquery

jQuery 列表操作

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

动态添加列表项

使用 append() 或 prepend() 方法可以在列表的末尾或开头添加新项。例如：

$("#myList").append("<li>New Item</li>");

删除列表项

通过 remove() 方法可以删除指定的列表项。例如，删除所有列表项：

$("#myList li").remove();

修改列表项内容

使用 text() 或 html() 方法可以修改列表项的文本或 HTML 内容。例如：

$("#myList li:first").text("Updated Item");

遍历列表项

使用 each() 方法可以遍历列表中的每一项。例如：

$("#myList li").each(function() {
    console.log($(this).text());
});

事件绑定

通过 on() 方法可以为列表项绑定点击事件。例如：

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

排序列表项

可以使用 sort() 方法对列表项进行排序。例如，按字母顺序排序：

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

示例代码

以下是一个完整的示例，展示如何动态添加、删除和绑定事件：

jquery 列表

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addBtn">Add Item</button>
<button id="removeBtn">Remove Last Item</button>

<script>
    $("#addBtn").click(function() {
        $("#myList").append("<li>New Item</li>");
    });

    $("#removeBtn").click(function() {
        $("#myList li:last").remove();
    });

    $("#myList").on("click", "li", function() {
        alert($(this).text());
    });
</script>