Yuri Boyz
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
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
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
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.
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<button id="myButton">Click Me</button>
JavaScript$('button#myButton').on('click', function() {
$('ul > li:last').addClass('highlight');
});
CSS.highlight {
background-color:rgb(0,255,255);
}
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.
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
To be able to give an answer we need to see how opacity is being used in your markup.
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.
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.
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 TRIALMembers 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.
On click where - what element is the event handler bound to?
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.