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>

私がしたかったのは、[前へ]ボタンを押すと、リストの最初の項目が表示されない状態で検索され、その内容を含むメッセージが表示されることです。この場合、Steve1です。

だから私$('#slider ul li[display="none"]:first')はそれを使用しました。つまり、sliderという名前のdivが見つかり、それはulの最初のリスト項目であり、display：noneです。

メッセージに空白が返されます。

誰もが私が間違っていることを知っています。

それは私が構築した属性部分と関係があると思います：

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 に答える