当前位置：首页 > jquery

jquery li

2026-03-02 11:56:45jquery

jQuery 操作 `<li>` 元素的方法

jQuery 提供了多种方法来操作 HTML 中的 <li> 元素。以下是一些常见的操作方式：

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

$('li')

选取特定类名的 <li> 元素：

$('li.className')

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

jquery li

$('li').html('新的内容');
$('li').text('纯文本内容');

添加或移除类 使用 .addClass() 和 .removeClass() 可以动态修改 <li> 的类：

$('li').addClass('active');
$('li').removeClass('inactive');

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

jquery li

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

动态添加或删除 <li> 通过 .append() 或 .remove() 可以在列表中动态添加或删除 <li>：

$('ul').append('<li>新增项</li>');
$('li').last().remove();

事件绑定 为 <li> 元素绑定点击事件：

$('li').on('click', function() {
    alert($(this).text());
});

示例代码

以下是一个完整的示例，展示如何动态操作 <li> 元素：

<ul id="myList">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>
<button id="addItem">添加项目</button>
<button id="removeItem">删除最后一项</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#addItem').click(function() {
            $('#myList').append('<li>新项目</li>');
        });

        $('#removeItem').click(function() {
            $('#myList li:last').remove();
        });

        $('li').on('click', function() {
            $(this).toggleClass('highlight');
        });
    });
</script>