jQueryでN番目の前の兄弟を選択しますか?
-
06-07-2019 - |
質問
jQueryセレクターを設定しようとしていますが、それをどのように記述する必要があるか正確にはわかりません。
次のような順序のないリストがあります:
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li class="last">something</li>
</ul>
最後の子を選択するかどうかがわかりました。<!> quot; ul li.last <!> quot;または<!> quot; ul.li:last <!> quot;しかし、最後から2番目、3番目、または20番目が欲しい場合はどうすればよいですか?今私はそれをしますか?
解決
eq
を使用します:
$('ul li').eq(X);
Xは、必要な要素の0から始まるインデックスです。 セレクタフォームを使用することもできます。
$('ul li:eq(X)');
また、 nth-child
を使用して同様の結果を得ることができます。
$('ul li:nth-child(X)');
ドキュメントには、$('ul li').eq(19);
と$('ul li:nth-child(20)');
の違いについての説明があります:
:eq(index)は単一の要素のみに一致しますが、これは複数の要素に一致します:インデックスを持つ親ごとに1つ。偶数、奇数、または等式を持つ親ごとに複数。ゼロから始まる:eq()とは対照的に、指定されたインデックスは1インデックスです。
したがって、<ul>
を実行すると、クエリの20番目に一致する要素が1つ取得されます(したがって、ドキュメントに複数のリストがある場合、<!> quot;すべての19番目の子<!> quotは取得されません;、<=>は、ドキュメント内の各<=>の20番目に一致する個々のリスト要素を取得します。
編集:
<!> quot; second to last <!> quot;のようなことをする場合、それを行うための正しい方法は次のようになります:
var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);
ただし、おそらくlength-2が0以上であることを確認する必要があります。
他のヒント
最後から3番目が必要ですか?
var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");
簡単な説明:$ ul(jQueryオブジェクト)の長さは、見つかったliの数です。したがって、<!> quot;:eq(n)<!> quot;とともに使用できます。セレクタを使用して、目的のインデックスでliを取得します。
リストが短すぎる(3 li未満)場合にMath.maxを使用しました。
これも機能しますが、明らかに最善の方法ではありません。
var $ul = $("ul li:last").prev().prev();
3番目と20番目の場合、 ul li:eq(3)
および ul li:eq(20)
を実行できます。最後から2番目は、 nth-child
の equation
引数オプションですが、よくわかりません。
alert($('ul li').eq(3).text());
3番目のリストアイテムのテキストが警告されます。
jQueryチームはこの機能をバージョン1.9で追加しました