Link to home
Start Free TrialLog in
Avatar of Yuri Boyz
Yuri BoyzFlag for Uganda

asked on

Get last element of <li>

Hi,

I have a <ul> which has <li> elements. on click function I want to get the last <li> which opacity is 0 and make its text-decoration to none.
Looking forward for help.

Thanks
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Please show us your markup.

on click function
On click where - what element is the event handler bound to?

which opacity is 0
Do you want the last visible item - or do you have items where opacity is > 0 but < 1?

It is very difficult to visualise what you are asking without seeing your code.
Is it the only <ul> on the page, or are there others?
If you simply want to target the last div in a UL, it would be like the following:
HTML
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
<button id="myButton">Click Me</button>

Open in new window

JavaScript
$('button#myButton').on('click', function() {
	$('ul > li:last').addClass('highlight');
});

Open in new window

CSS
.highlight {
  background-color:rgb(0,255,255);
}

Open in new window


The above shows a single UL with four LIs and a button.  If you click the button, you will see that I simply added a class that adds a background color to the LI.  This is where you could do whatever you need to do with the opacity.

Understand that if you want to find the last LI in a specific UL, you will either need to know the exact sequence of your ULs, or have them differentiated some how, typically by assigning unique IDs to each UL.

Let me know if you have any further questions.
Avatar of Yuri Boyz

ASKER

@Jim, thanks for this. Will update soon.
Doesn't answer the question of the opacity 0?

Opacity can be anything from 0 (hidden) to 1 full opaque

We can test for items being hidden if they have visibility:hidden or display: none but to test for opactiy we would have to examine the style of the element.

I would like to know more about how opacity is playing into this - you specifically mentioned in your OP

I want to get the last <li> which opacity is 0

To be able to give an answer we need to see how opacity is being used in your markup.
@Julian, I was confused by what exactly he meant by opacity.  It could mean the last LI in a UL with opacity 0, but I don't know.

If he wants to find the last LI that has an opacity of 0, then that would be a bit more work.
Exactly - which is why I asked for clarification.

The opacity requirement changes the landscape - prefer to understand the problem space before recommending a solution.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.