jQueryで特定の要素が何番目にあるのかを取得する：index()
どの場合もマッチした要素のインデックス番号を返しますが、もしマッチする要素がなければ -1 を返します。また、インデックス番号は 0 から始まるので注意してください。 以下では、それぞれのパターンについてひとつずつ説明していきます。 引数に jQuery オブジェクトを指定した場合 この場合は、マッチする要素の中から引数に指定されている jQuery オブジェクトが何番目にあるかを返します。 以下はクリックしたリストの番号を表示するサンプルです。 HTML <ul> <li class="sample">1: Click Me!</li> <li class="sample">2: Click Me!</li> <li class="sample">3: Click Me!</li> <li class="sample">4: Click Me!</li> <li class="sampl
CSSの:nth-childと:nth-last-child擬似クラスの使用例 - NxWorld
今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://spyweb.media/2017/10/18/css-nth-child-awesome-technique/
