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());
});
这些方法可以灵活组合,以满足不同的交互需求。







