如何选择列表中的最后一个LI并使用jQuery将其变为红色?

How would I select the last LI in the list and turn it red with jQuery?

本文关键字：jQuery 红色 LI 选择 何选择 列表 最后一个      更新时间：2023-09-26

我对JS和jQuery还是个新手。这是我必须尝试的代码，并将组中的最后一个LI文本更改为红色。

下面是要引用的HTML代码: 
<div id="content">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>

这是我想出的jQuery代码:

$('#content').change(function () {
   $(this).find('li:nth-child(3)').css('color', 'red');
});

您可以使用:last来选择最后一个li，如下所示:

$('#content ul li:last').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>

这样做:

$("#content ul li:last-child").css({"color": "red"});

希望对大家有所帮助

其他答案已经展示了如何使用jQuery实现它。但是，如果你的列表是动态的(项目可以添加和删除)，你最好使用styles

<style>
#content li:last-child {
    background: #ff0000;
}
</style>

，否则您将不得不观察DOM更改。

在完整的javascript中，你可以这样写:

// for the first example I addressed the element before the last
//
// To get the last element: lis.length - 1
var lis = document.getElementById('content')
     .getElementsByTagName('ul')[0].getElementsByTagName('li');
lis[lis.length - 2].style.color='yellow';
// OR
document.querySelectorAll('#content ul li:last-child')[0].style.color='red'
<div id="content">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>

有很多方法可以做到这一点。我用三个方法实现。不使用jquery和使用jquery。尝一个吧。希望这对你有帮助。

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
div#content1 ul li:last-child{ /* here we choose, div with id= content1, inside that div get the ul , inside that ul, gets the last element of li elements*/
    color:red;
}
</style>
<body>
<h2>Method one : Without js, using only css</h2>
<div id="content1">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>
<hr>
<h2>Method two : Using jquery</h2>
<div id="content2">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>
<hr>
<h2>Method three : Using jquery</h2>
<div id="content3">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
//For method two
$("div#content2 ul li:last-child").css({"color":"red"});//like in the css, we get the last element of li in side ul, inside the div which its id=content2
//For method three using the index. in you case the last element of li index is 3
$("div#content3 ul li").eq(3).css({"color":"red"});
</script>
</html>

相关文章：