1

好的，所以我有这个包含 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>

我想要发生的是，当您按下上一个按钮时，它会在列表中找到第一个不显示的项目，并显示一条包含其内容的消息。在这种情况下史蒂夫1。

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

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

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

我认为这与我构建的属性部分有关：

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

4

2 回答 2

10

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

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

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

元素可以被认为是隐藏的，原因如下：

  1. 它们的 CSS 显示值为 none。
  2. 它们是 type="hidden" 的表单元素。
  3. 它们的宽度和高度明确设置为 0。
  4. 祖先元素是隐藏的，因此该元素不会显示在页面上。
于 2012-04-25T03:35:54.437 回答
2 
$('#slider ul li[style="display:none"]:first')

方括号根据属性选择元素。没有display属性。但是style可以使用该属性。如果style属性有其他样式，display:none那么您可以使用 RegExp 选择器：

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

星号 ( *) 表示字符串可以存在于属性的实际值内的任何位置。

这是一个演示：http: //jsfiddle.net/TAv3d/

jQuery 选择器的文档：http: //api.jquery.com/category/selectors/

或者，您可以使用函数进行 DOM 遍历（而且速度更快）：

$('#slider').children('ul').children('li').filter('[style="display:none"]').first();
于 2012-04-25T03:39:46.417 回答