jquery 如何获取显示为 :none 的第一个列表项

标签 jquery html

好的,所以我有一个包含 ul 的 div:

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

我想要发生的是,当您按下 Previous 按钮时,它会在列表中找到第一个不显示的项目,并显示一条包含其内容的消息。在本例中为 Steve1。

所以我使用了 $('#slider ul li[display="none"]:first') 这意味着它应该找到名为 slider 的 div 并且它是 ul 中带有显示的第一个列表项: 没有。

我在消息中得到一个空白。

任何人都知道我做错了什么。

我认为这与我构造的属性部分有关:

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

最佳答案

$('#slider ul li:hidden:first') 就是你要找的东西

http://api.jquery.com/hidden-selector/

:hidden 符合以下条件,根据上面的链接

Elements can be considered hidden for several reasons:

  1. They have a CSS display value of none.
  2. They are form elements with type="hidden".
  3. Their width and height are explicitly set to 0.
  4. An ancestor element is hidden, so the element is not shown on the page.

关于jquery 如何获取显示为 :none 的第一个列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10308993/

相关文章:

javascript - 如何激活 ui-layout-west 中的调整大小选项

javascript - pgwModal:使用触发器选项复制页面中模态内容的 HTML 标记。如何摆脱重复?

jQuery 计算某个类的 div 数量?

html - 帮助制作可点击的背景幻灯片

css - 在 Firefox 和 IE9+ 上溢出

javascript - 在 JavaScript 中重新定义事件

html - CSS Box 阴影未出现在具有相同类的元素上

javascript - 使用 jquery 更改表单输入字段的值

php - php登录后jquery重定向

jquery - 如何通过将鼠标悬停在另一个 div 上来隐藏一个 div?