Home/ Questions/Q 7858929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T21:41:05+00:00

Ok, so I have this div which contains a ul: <html> <head> <script type=text/javascript

  • 0

Ok, so I have this div which contains a ul:

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($('#slider ul li[display="none"]:first').text());
  });
});
</script>
<style type="text/css">
li
{
display:inline;
margin: 20px;
}
</style>
</head>
<body>
<div id="slider" style="width:100%; overflow-x:hidden"><ul><li style="display:none">Steve 1</li><li style="display:none">Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><li>Steve</li><li>Frank</li><li>Tim</li><ul>
</div>
<button type="button" style="float:left">Previous</button><div style="float:right">Next</div>
</body>
</html>

What I wanted to happen is that when you press the Previous button it would find the first item in the list with display none and show a message with it’s content. In this case Steve1.

So I used $('#slider ul li[display="none"]:first') which means it should find the div named slider and it’s first list item in the ul with display:none.

I get a blank back in the message.

Anyone know what I’m doing wrong.

I think it’s got to do with the attribute part which I constructed from:

http://api.jquery.com/attribute-equals-selector/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('#slider ul li[style="display:none"]:first')

    Square brackets select elements based on attributes. There was no display attribute. But the style attribute can be used. If the style attribute has other styles than just display:none then you can use a RegExp selector:

    $('#slider ul li[style*="display:none"]:first')

    The asterik (*) means that the string can exist anywhere inside the actual value of the attribute.

    Here is a demo: http://jsfiddle.net/TAv3d/

    Docs for jQuery selectors: http://api.jquery.com/category/selectors/

    Alternatively you can use functions for DOM traversal (and it’s a bit faster):

    $('#slider').children('ul').children('li').filter('[style="display:none"]').first();
    • 0