jQuery の罠 gt 編
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ :gt は 0 から数える さらに :gte がないので nth-child と比べて N 番目以降としたときに 2 つ差がでる
◆ HTML構造的にそれぞれに N 番目以降 じゃなくてセレクタで取得したものに対して N 番目以降
◆ .slice したほうが見やすいし セレクタにはいらない
◆ css で実装されないのもよく分かる仕様だった
◆ HTML構造的にそれぞれに N 番目以降 じゃなくてセレクタで取得したものに対して N 番目以降
◆ .slice したほうが見やすいし セレクタにはいらない
◆ css で実装されないのもよく分かる仕様だった
またも jQuery のコードをいじることがありまして そこではセレクタに
css3 に無い jQuery 独自のセレクタは普段使わないので(cssの知識で書いているので知らないし速度面で遅そう)初めて見ました
gt なので 何番目か以降を取るものみたいです
「:gt(0)」 はもちろん 「>0」 ですが nth 系と違って 0 番目から数えるようです
nth と揃ってなくて不便ですが 0 番目から数えた番号にしたかったらこっち 1 番目から数えた番号にしたかったら nth と使い分けるものかと思いました
ですが gt と lt はあるのに gte と lte がないです
:nth-child(n + 2) だと 2番目 3番目・・・
になるのに対して
:gt(2) だと 4番目(0から数えて3番目) 5番目(4番目)・・・
となります
2つもずれていて思った通りの使い方ができてません
なので結局使いづらいです
さらに とりあえず元のコードを基本的にコピペするようにして :gt を使うようにしていたら
という HTML で 各行の 2 つめ以降の td をとりだして
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
の td を取得するつもりで
と書いたら
という結果になりました
普通にセレクタで取得してきた後に .slice(1) してるのと一緒です
HTML 構造を維持した状態で tr のそれぞれの 2 番目以降をもってきてくれるわけではなかったです
nth-child にするともちろん動きます
:gt はいらない子です
$("li:gt(" + n + ")")
というのがありましたcss3 に無い jQuery 独自のセレクタは普段使わないので(cssの知識で書いているので知らないし速度面で遅そう)初めて見ました
gt なので 何番目か以降を取るものみたいです
「:gt(0)」 はもちろん 「>0」 ですが nth 系と違って 0 番目から数えるようです
nth と揃ってなくて不便ですが 0 番目から数えた番号にしたかったらこっち 1 番目から数えた番号にしたかったら nth と使い分けるものかと思いました
ですが gt と lt はあるのに gte と lte がないです
:nth-child(n + 2) だと 2番目 3番目・・・
になるのに対して
:gt(2) だと 4番目(0から数えて3番目) 5番目(4番目)・・・
となります
2つもずれていて思った通りの使い方ができてません
なので結局使いづらいです
さらに とりあえず元のコードを基本的にコピペするようにして :gt を使うようにしていたら
<table>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</tbody>
</table>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</tbody>
</table>
という HTML で 各行の 2 つめ以降の td をとりだして
1-2, 1-3, 2-2, 2-3, 3-2, 3-3
の td を取得するつもりで
$("tr td:gt(0)")
と書いたら
[<td>1-2</td>, <td>1-3</td>, <td>2-1</td>, <td>2-2</td>, <td>2-3</td>, <td>3-1</td>, <td>3-2</td>, <td>3-3</td>]
という結果になりました
普通にセレクタで取得してきた後に .slice(1) してるのと一緒です
HTML 構造を維持した状態で tr のそれぞれの 2 番目以降をもってきてくれるわけではなかったです
nth-child にするともちろん動きます
$("tr td:nth-child(n+2)")
[<td>1-2</td>, <td>1-3</td>, <td>2-2</td>, <td>2-3</td>, <td>3-2</td>, <td>3-3</td>]
:gt はいらない子です