jquery 列表

jQuery 列表操作

jQuery 提供了多种方法来操作 HTML 列表（如 <ul> 或 <ol>）。以下是一些常见的操作方式：

动态添加列表项

使用 append() 或 prepend() 方法可以向列表中添加新项。

$("ul").append("<li>新列表项</li>");

移除列表项

使用 remove() 方法可以删除指定的列表项。

$("li").remove(); // 移除所有列表项
$("li:first").remove(); // 移除第一个列表项

遍历列表项

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

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

修改列表项内容

使用 text() 或 html() 方法可以修改列表项的内容。

$("li:first").text("修改后的内容");

列表排序

可以使用 JavaScript 的 sort() 方法结合 jQuery 对列表进行排序。

var list = $("ul");
var listItems = list.children("li").get();
listItems.sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$.each(listItems, function(index, item) {
    list.append(item);
});

事件绑定

可以为列表项绑定点击事件或其他事件。

$("li").click(function() {
    alert($(this).text());
});

动态创建列表

可以通过 jQuery 动态创建列表并添加到 DOM 中。

var list = $("<ul>");
for (var i = 0; i < 5; i++) {
    list.append($("<li>").text("Item " + (i + 1)));
}
$("body").append(list);

注意事项

• 使用 jQuery 操作列表时，确保 DOM 已加载完成，可以将代码放在 $(document).ready() 中。
• 对于大型列表，频繁的 DOM 操作可能影响性能，建议使用文档片段或批量操作优化性能。