jquery列表

jQuery 列表操作

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

创建列表项并添加到列表中
使用 append() 方法动态添加列表项：

$("#myList").append("<li>新项目</li>");

移除列表项
通过 remove() 方法删除特定项：

$("#myList li:last").remove(); // 删除最后一个列表项

遍历列表项
使用 each() 遍历所有列表项并操作：

$("#myList li").each(function() {
    console.log($(this).text()); // 输出每一项的文本
});

动态排序列表
通过 JavaScript 数组排序后重新生成列表：

var items = $("#myList li").get();
items.sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$("#myList").empty().append(items);

列表事件绑定

点击事件
为列表项绑定点击事件：

$("#myList").on("click", "li", function() {
    alert($(this).text()); // 点击时显示当前项文本
});

动态添加事件
对于动态生成的列表项，使用事件委托：

$("#myList").on("mouseover", "li", function() {
    $(this).css("background-color", "yellow");
});

列表样式控制

切换类样式
通过 toggleClass() 切换列表项样式：

$("#myList li").click(function() {
    $(this).toggleClass("highlight");
});

隐藏/显示列表
使用 hide() 和 show() 控制列表可见性：

$("#toggleButton").click(function() {
    $("#myList").toggle(); // 切换显示/隐藏
});

列表数据获取

获取列表内容
将列表项文本转换为数组：

var itemTexts = [];
$("#myList li").each(function() {
    itemTexts.push($(this).text());
});
console.log(itemTexts);

过滤列表项
使用 filter() 筛选符合条件的项：

$("#myList li").filter(function() {
    return $(this).text().includes("重要");
}).css("color", "red");