jquery li

jQuery 操作 <li> 元素的方法

jQuery 提供了多种方法来操作 HTML 中的 <li> 元素（列表项）。以下是常见的使用场景和示例：

选择 <li> 元素

使用 jQuery 选择器可以轻松选取 <li> 元素，例如：

// 选择所有 <li> 元素
$("li").css("color", "red");

// 选择特定列表中的 <li> 元素
$("ul.my-list li").addClass("highlight");

// 选择第一个或最后一个 <li>
$("li:first").text("First Item");
$("li:last").text("Last Item");

// 选择第 n 个 <li> 元素（索引从 0 开始）
$("li:eq(2)").css("font-weight", "bold");

动态添加 <li> 元素

可以通过 append()、prepend()、after() 等方法动态添加列表项：

// 在列表末尾添加 <li>
$("ul").append("<li>New Item</li>");

// 在列表开头添加 <li>
$("ul").prepend("<li>First Item</li>");

// 在某个 <li> 后插入新项
$("li:eq(1)").after("<li>Inserted Item</li>");

删除 <li> 元素

使用 remove() 或 empty() 方法删除列表项：

// 删除某个 <li>
$("li:eq(2)").remove();

// 清空整个列表
$("ul").empty();

修改 <li> 内容和属性

可以通过 text()、html()、attr() 等方法修改 <li> 的内容或属性：

// 修改文本内容
$("li:first").text("Updated Text");

// 修改 HTML 内容
$("li:last").html("<strong>Bold Item</strong>");

// 修改属性（如 class 或 data-*）
$("li").attr("class", "list-item");

事件绑定

可以为 <li> 元素绑定点击、悬停等事件：

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

$("li").hover(
    function() { $(this).addClass("hover"); },
    function() { $(this).removeClass("hover"); }
);

遍历 <li> 元素

使用 each() 方法遍历所有 <li> 元素：

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

这些方法可以灵活组合，以满足不同的交互需求。