私はjqueryを使用して、表示非表示リストを作成しています。ULの6番目の子に続くすべての子リスト項目を非表示にする必要があります。通常、高さを設定してから、クリックごとに高さを変更することでこれを行いますが、これを機能overflow:hiddenさせるには、css に追加する必要があり、これはオプションではありません。
7 番目の子より大きいすべての子リスト要素を取得するにはどうすればよいですか?
何かのようなもの、
$("ul li:6n").domeSomething()
質問する
8912 次
4 に答える
16
7番目の子よりも大きいすべての子リスト要素を取得するにはどうすればよいですか？
要素インデックス=7+を選択します
$("ul li:gt(6)").domeSomething()
セレクターはゼロベースインデックスを使用します：
JavaScript配列は0ベースのインデックスを使用するため、これらのセレクターはその事実を反映していることに注意してください。これが、$（'。myclass：gt（1）'）が、最初の要素の後ではなく、クラスmyclassを持つドキュメントの2番目の要素の後の要素を選択する理由です。対照的に、：nth-child（n）は、CSS仕様に準拠するために1ベースのインデックスを使用します。
于 2012-06-10T08:23:44.497 に答える
3
gdoronからの回答とneu-rahからの回答という2 つの以前の回答について説明するためだけに回答を書きたかったのです。投票数を見ると、ほとんどの読者がドロンの答えをよりよく見つけていることがわかります。私は同意せず、その理由を説明しようとします。
Selectorのドキュメントに記載されている説明(ここ:gt()の「追加情報:」を参照):
:gt()は jQuery 拡張機能であり、CSS 仕様の一部ではないため、使用するクエリは、ネイティブ DOM メソッドによって提供されるパフォーマンスの向上を利用でき ませ:gt()ん。querySelectorAll()最新のブラウザーでパフォーマンスを向上さ せるには、$("your-pure-css-selector").slice(index)代わりに使用してください。
コードはhereまたはより良いhereでテストできます(jQuery 1.7.2 の最小化されていないコードを使用)。コードはステートメントのみを使用します$("ul li:gt(6)").css("color", "red");。Chrome の Developer Tools で「Pause on exceptions」ボタンを有効にしてデモを開始すると、問題をよりよく理解できます。次の例外が表示されます (最初のものではありません)。
したがって、jQuery の現在の実装では、最高のパフォーマンスを得るために Web ブラウザーのネイティブを使用しようとしていることがわかります。 querySelectorAll()その後、関数$.makeArrayを使用して から jQuery ラッパーを作成しNodeListます。例外の場合、行
return oldSizzle(query, context, extra, seed);
したがって、 でサポートされているセレクターを使用すると、最高のパフォーマンスが得られquerySelectorAll()ます。例えば
$("ul li").slice(7)
としてより良いです
$("ul li:gt(6)")
可能な限り、より正確なセレクターを使用することをお勧めします。たとえば、親<ul>要素が持っている場合は、id="menu1"使用できます
$("#menu1 >li").slice(7)
最良の結果を得るために。ページに複数の <ul>要素がある場合にさらに役立ちます。
誰かが言うことができます: セレクター"ul li:gt(6)"は十分に速く動作します。正しいですが、ループ内でセレクターを使用したり、ループ内で呼び出される関数内でセレクターを使用したりすることを忘れないでください。したがって、実行時間が 100 倍になると、10 ミリ秒と 30 ミリ秒の違いがより明確になります。
さらに、誰かが何らかの選択を実装する方法を自問して答えを得た場合、その人はコードパターンを永久に使用します。性能的に有利なパターンを使用した方が良いと思います。そうじゃない。
更新:とセレクターのパフォーマンスの違いを明確にするために、デモを追加$("ul li:gt(6)")しました。誰もが彼が使用する Web ブラウザーで違いをテストできます。さらに、ページに他の多くの要素がある場合は、id セレクターがより適切に機能することを忘れないでください。$("ul li").slice(7)$("#menu1 >li").slice(7)
私のコンピューターでは、$("ul li").slice(7)との実行時間$("#menu1 >li").slice(7)はほぼ同じで (ページにはほとんど要素がありません) 、 forよりも約 2.5 ～ 4.5 倍優れ$("ul li:gt(6)")ています。li結果は、アイテムの数、ページ上の要素の数、および他の多くの要素に依存する可能slice性があり:gtます。前に参照した jqGrid ドキュメント)。
于 2012-06-10T10:33:15.090 に答える
2
セットを減らすためにスライスを使用する
.slice(start[,end])
例（編集済み）
$("ul li").slice(6).doSomething(...)
于 2012-06-10T08:25:09.733 に答える
1
これを試して：
$('ul li:eq(6)').nextAll().domeSomething()
于 2012-06-10T08:25:06.193 に答える