jquery li

jQuery 操作 <li> 元素的方法

通过 jQuery 可以方便地操作 HTML 中的 <li> 元素，包括选择、修改、添加和删除等操作。

选择 <li> 元素

使用 jQuery 选择器可以选中特定的 <li> 元素：

// 选中所有 li 元素
$('li')

// 选中特定 class 的 li 元素
$('li.className')

// 选中特定 id 的 li 元素
$('li#idName')

// 选中 ul 下的直接子 li 元素
$('ul > li')

修改 <li> 元素内容

可以通过 .text() 或 .html() 方法修改 <li> 元素的内容：

// 修改文本内容
$('li').text('新的文本内容')

// 修改 HTML 内容
$('li').html('<strong>加粗文本</strong>')

添加和删除 <li> 元素

可以在列表中添加新的 <li> 元素或删除现有的 <li> 元素：

// 在 ul 末尾添加新的 li 元素
$('ul').append('<li>新的列表项</li>')

// 在 ul 开头添加新的 li 元素
$('ul').prepend('<li>新的列表项</li>')

// 删除所有 li 元素
$('li').remove()

// 删除特定 class 的 li 元素
$('li.className').remove()

遍历 <li> 元素

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

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

添加事件监听

可以为 <li> 元素添加点击等事件监听：

$('li').click(function() {
    alert('你点击了: ' + $(this).text())
})

修改样式

可以通过 .css() 方法修改 <li> 元素的样式：

$('li').css('color', 'red')

这些方法可以组合使用，实现更复杂的列表操作效果。