回答編集履歴

1

:nth-of-type()

2021/05/17 04:38

投稿

think49
think49

スコア18189

test CHANGED
@@ -124,4 +124,62 @@
124
124
 
125
125
 
126
126
 
127
+ ### :nth-of-type()
128
+
129
+
130
+
131
+ > jQueryのセレクターで、INPUT要素を
132
+
133
+ > "[name=ipt]:nth-of-type(1)"
134
+
135
+ > などと指定したいです。
136
+
137
+
138
+
139
+ :nth-of-type() の機能を誤認しています。
140
+
141
+
142
+
143
+ - [:nth-of-type() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type)
144
+
145
+
146
+
147
+ > :nth-of-type() は CSS の擬似クラスで、**兄弟要素のグループの中で指定された型 (タグ名) の要素**を、位置に基づいて選択します。
148
+
149
+
150
+
151
+ この場合は、タグ名を指定しなかったので、下記結果が返ってきます。
152
+
153
+
154
+
155
+ - [name=ipt] を持つ全ての要素を兄弟要素ごとにグループ化する
156
+
157
+ - グループ化された同じ兄弟要素郡の中で0番目のインデックスを持つ要素を参照します。
158
+
159
+
160
+
161
+ このセレクタで期待値を得るには、下記条件を満たす必要があります。
162
+
163
+
164
+
165
+ - input要素以外の [name=ipt] を満たす要素が存在しない
166
+
167
+ - 全ての [name=ipt] が一つの兄弟要素郡に存在している
168
+
169
+
170
+
171
+ 前述の繰り返しになりますが、`:nth-of-type()`はDOM上から検索する機能に特化しており、検索結果をフィルタする機能を備えていません。
172
+
173
+ フィルタする考え方の延長線には `jQuery#filter` がありますが、0番目のインデックスを持つ要素を得るには大仰で、
174
+
175
+
176
+
177
+ - [.filter() | jQuery API Documentation](https://api.jquery.com/filter/)
178
+
179
+
180
+
181
+ 要素ノードを一つだけ得るなら、`jQuery#get()`, `jQuery#eq()`, `jQueryObject[0]` の三択になると思います。
182
+
183
+
184
+
127
185
  Re: miu_ras さん