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

Question

I'm still somewhat of a newbie with JS and jQuery. This is the code I have to try and change the last LI text in the group to red.

Here is the the HTML code to reference:

<div id="content">
    <div>
        <div>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
            </ul>
        </div>
    </div>
</div>

Here is the jQuery code I have come up with:

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

`#content` is a **DIV**, it doesn't change, only form inputs do? What exactly are you trying to do here ? — adeneo, Sep 14 '16 at 15:36
Possible duplicate of [How to select last child element in jQuery?](http://stackoverflow.com/questions/4612794/how-to-select-last-child-element-in-jquery) — Dekel, Sep 14 '16 at 15:36

Ibrahim Khan · Accepted Answer · 2016-09-14T15:39:16.370

You can use :last to select last li like following.

$('#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>

codelock · Answer 2 · 2016-09-14T15:38:59.607

1

This will do:

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

Hope it helps a bit

edited Sep 14 '16 at 15:38

answered Sep 14 '16 at 15:38

codelock

747
5
8

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

Other answers already show how to do it with jQuery. However if your list is dynamic (items can be added and removed) you better use styles

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

otherwise you would have to observe DOM changes. See this post how to detect DOM changes.

edited May 23 '17 at 12:24

Community

1
1

answered Sep 14 '16 at 16:31

Vanice

676
5
15

score 0 · Answer 4 · answered Sep 14 '16 at 16:08

In full javascript you can write:

// 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>

score 0 · Answer 5 · answered Sep 14 '16 at 17:21

there are so many ways to do this. I have implement with three methods. without jquery and with jquery . try one of it. hope this will help to you.

<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>

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

5 Answers5