How to get specific element javascript based on style

Question

I need to acces an element that has a certain style.

This is my structure

<ul>
  <li> Hi </li>
  <li> bye </li>
  <li> third one </li>
</ul>

The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:

<ul>
  <li> Hi </li>
  <li> bye </li>
  <li style:"display:none;"> third one </li>
</ul>

Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?

I was thinking of something in the form of:

var myId = $("#slider > ul li").last().attr("id");

But obviously I always get the ID of the item that is hidden since its still there.

Can I do something like select last where !display:hidden ?

First of: style:"display:none;" should be style="display:none;", secondly: if you add a class instead of a style and then define the display: none in your CSS, you could use $('#slider > ul li:not('.myDeactivatedClassName')') — somethinghere
– somethinghere, Commented Oct 5, 2015 at 15:33
Use a css class name to both put that certain style on elements and select all elements with that style. — Shilly
– Shilly, Commented Oct 5, 2015 at 15:34

T.J. Crowder · Accepted Answer · 2015-10-05 15:38:12Z

3

Can I do something like select last where !display:hidden ?

Yes, with jQuery's :visible pseudo-class:

var myId = $("#slider > ul li:visible").last().attr("id");

(Note: Your li elements don't actually have id values, but that's a tweak.)

Live Example:

var listItem = $("#slider > ul li:visible").last();
$("<p>")
  .text("Text of last visible item: " + listItem.text())
  .appendTo(document.body);

<div id="slider">
  <ul>
    <li>Hi</li>
    <li>bye</li>
    <li style="display:none;">third one</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Oct 5, 2015 at 15:38

answered Oct 5, 2015 at 15:35

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martijn Kerckhaert Over a year ago

Works like a charm! Thank you!

charlietfl · Accepted Answer · 2015-10-05 15:35:29Z

2

Can use ':visible' selector

var myId = $("#slider > ul li:visible").last().attr("id");

answered Oct 5, 2015 at 15:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Gael · Accepted Answer · 2015-10-05 15:37:26Z

0

It should work using:

$("#slider > ul li:visible").last().attr("id");

https://api.jquery.com/visible-selector/

answered Oct 5, 2015 at 15:37

Gael

1676 bronze badges

Comments

Airswoop1 · Accepted Answer · 2015-10-05 15:43:35Z

0

so your inline styling is a bit off it should be

<ul>
  <li> Hi </li>
  <li> bye </li>
  <li style="display:none;"> third one </li>
</ul>

You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:

$('ul').children().each(function(e) {
   if($(this)[0].style.display == 'none') {
     console.log($(this).prev());   
   }
})

answered Oct 5, 2015 at 15:43

Airswoop1

4414 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to get specific element javascript based on style

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related