回答編集履歴
1
:nth-of-type()
answer
CHANGED
|
@@ -61,4 +61,33 @@
|
|
|
61
61
|
</html>
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
+
### :nth-of-type()
|
|
65
|
+
|
|
66
|
+
> jQueryのセレクターで、INPUT要素を
|
|
67
|
+
> "[name=ipt]:nth-of-type(1)"
|
|
68
|
+
> などと指定したいです。
|
|
69
|
+
|
|
70
|
+
:nth-of-type() の機能を誤認しています。
|
|
71
|
+
|
|
72
|
+
- [:nth-of-type() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type)
|
|
73
|
+
|
|
74
|
+
> :nth-of-type() は CSS の擬似クラスで、**兄弟要素のグループの中で指定された型 (タグ名) の要素**を、位置に基づいて選択します。
|
|
75
|
+
|
|
76
|
+
この場合は、タグ名を指定しなかったので、下記結果が返ってきます。
|
|
77
|
+
|
|
78
|
+
- [name=ipt] を持つ全ての要素を兄弟要素ごとにグループ化する
|
|
79
|
+
- グループ化された同じ兄弟要素郡の中で0番目のインデックスを持つ要素を参照します。
|
|
80
|
+
|
|
81
|
+
このセレクタで期待値を得るには、下記条件を満たす必要があります。
|
|
82
|
+
|
|
83
|
+
- input要素以外の [name=ipt] を満たす要素が存在しない
|
|
84
|
+
- 全ての [name=ipt] が一つの兄弟要素郡に存在している
|
|
85
|
+
|
|
86
|
+
前述の繰り返しになりますが、`:nth-of-type()`はDOM上から検索する機能に特化しており、検索結果をフィルタする機能を備えていません。
|
|
87
|
+
フィルタする考え方の延長線には `jQuery#filter` がありますが、0番目のインデックスを持つ要素を得るには大仰で、
|
|
88
|
+
|
|
89
|
+
- [.filter() | jQuery API Documentation](https://api.jquery.com/filter/)
|
|
90
|
+
|
|
91
|
+
要素ノードを一つだけ得るなら、`jQuery#get()`, `jQuery#eq()`, `jQueryObject[0]` の三択になると思います。
|
|
92
|
+
|
|
64
93
|
Re: miu_ras さん
|