jQueryのセレクターでINPUT要素を1つだけ指定したい

jQueryのセレクターで、INPUT要素を

"[name=ipt]:nth-of-type(1)"

などと指定したいです。

(0)のように、INPUT要素ではなくLI要素なら取得できました。
(1)のように、セレクターだけではなく、eq()も使えば取得できました。が、後続の処理の都合上、セレクターを1度使うのみで取得したいです。
(2)(3)のような記述で指定したいのですがうまくいきません。
関係ないとは思いますが、Chrome, Firefox, IE, Edgeの全てで発生しています

アドバイス、よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6</head>
7<body>
8
9<ol>
10	<li>li1</li>
11	<li>li2</li>
12	<li>li3</li>
13</ol>
14
15<ul>
16	<li><input type="text" name="ipt" value="012">
17	<li><input type="text" name="ipt" value="123">
18	<li><input type="text" name="ipt" value="234">
19</ul>
20
21<script>
22$(function() {
23	console.log("(0)これはできる");
24	console.log($("ol li:nth-of-type(1)").text());
25	console.log($("ol li:nth-of-type(2)").text());
26	console.log($("ol li:nth-of-type(3)").text());
27	console.log("");
28
29	console.log("(1)これもできる");
30	console.log($("[name=ipt]").eq(0).val());
31	console.log($("[name=ipt]").eq(1).val());
32	console.log($("[name=ipt]").eq(2).val());
33	console.log("");
34
35	console.log("(2)これがやりたい。しかしうまくいかない");
36	console.log($("[name=ipt]:nth-of-type(1)").val());
37	console.log($("[name=ipt]:nth-of-type(2)").val());
38	console.log($("[name=ipt]:nth-of-type(3)").val());
39	console.log("");
40
41	console.log("(3)これもできない…");
42	console.log($("li input:nth-of-type(1)").val());
43	console.log($("li input:nth-of-type(2)").val());
44	console.log($("li input:nth-of-type(3)").val());
45});
46</script>
47
48</body>
49</html>

m.ts10806

2021/05/16 20:48

>後続の処理の都合上、セレクターを1度使うのみで取得したいです。このあたりを具体的に書かれないことにはアドバイス得るの難しいと思います。

think49

2021/05/17 02:19 編集

>後続の処理の都合上、セレクターを1度使うのみで取得したいです。 jQuery pluginを使用している等、jQuery.prototypeに生えたメソッドを使用する目的があると想像して回答しましたが、要件を具体化した方が回答を得やすいのは確かだと思います。想像力を要求する質問は質問者が求めていない回答/代替案が出てくる場合があります。

miu_ras

2021/05/17 05:36

>要件を具体化した方が回答を得やすい「セレクターを1度使うのみで取得」が要件です。要件の背景を書くとこのサイトでは、背景にイチャモンを付けたり関係ない代替案を書いてくる人がいるので、そういう回答を排除するためにシンプルに要件のみを書いたつもりでした。「後続の処理の都合上」も書かないほうが良かったかもしれませんね。

m.ts10806

2021/05/17 05:59

むしろ書かれてないほうが問題では。「前提や背景を考慮しない関係ない代替案」を引き出します。赤の他人にそこを正確に推し量るのは無理です。

m.ts10806

2021/05/17 06:05 編集

それに「後続の処理の都合上」がなかったとしても「別のやり方がでできてるのにあえてなぜそうしたいの？」という疑問を持つのが自然かと。要件から外れた回答でお互いの時間を無駄にしたくないですしね。「自分のやりたいことだけに答えればいい」とかエスパーを強いるのは質問者の傲慢とも思います。

think49

2021/05/17 07:52

> 要件の背景を書くとこのサイトでは、背景にイチャモンを付けたり関係ない代替案を書いてくる人がいるので、そういう回答を排除するためにシンプルに要件のみを書いたつもりでした。次からこれを書いてくれると助かります。私が巡らした考えの大半は必要なかったようですが、それが質問文から読み取れませんでした。

miu_ras

2021/05/17 09:55

>私が巡らした考えの大半は必要なかったようですがそんな事はありません。think49さんの回答は確かに質問に直結する回答ではありませんでしたが、「:nth-of-type」がなぜ駄目だったのか理解でき参考になりました。ありがとうございました。前回Visual Studio Codeで改行コードを表示させる方法を質問しました。その際に改行コードを表示させたい目的を書いてしまったところ、改行コードを表示させる方法には答えずに、構文チェックツールを使えばいいとか改行を統一させるツールを使えばチェックしなくて済むなど本質的ではない回答がつきました。また、回答は一度もせずに他の人の回答のコメント欄などに計18回もコメントするひどく粘着質な人にも絡まれました。 >次からこれを書いてくれると助かりますその説明を含め余計なことを書くとその部分に絡んでくる人がこのサイトでは少なからずいます。期待しない回答や不要ないざこざを極力避けるために、質問したいことだけを書くようにしたいと思っています。…のですが、「この質問ではセレクターだけでできるのかという点だけに限定させていただきます。もしも、不可能だということがわかったときには代替案の質問を新たにします」という注意書きでもしておけばいいのかもしれませんね。

think49

2021/05/17 10:54 編集

私の回答は A. 「:eq() 擬似クラスの公式URL」「サンプルコード」が質問に直結する回答 B. jQuery#get(), jQuery#eq(), jQueryObject[0] が「関係ない代替案」で意に沿わない回答と認識しており、結果的に「B. が不要だった」と回答後に理解したのが現状です。代替案を提案するのは、質問に直結する回答が「ない」もしくは「問題がある」からであって、善意で私は提案しています。私の立場からすれば善意で提案した内容が「関係ない代替案」といわれてしまうのは腑に落ちないわけで、後出しせずに初めから方針を明示して欲しかったのが本音です。書き方の問題もあるかもしれませんが、例えば、 - 不可能なら不可能とだけ回答をお願いします。 - 代替案は自分で調べます。というように、「自分でやる範囲」を明文化しておけば、好意的に受け取られるのではないかと思います。少なくとも私は自助努力意識の高い方と好意的に捉えます。

miu_ras

2021/05/17 22:44

私は最初に、「eq()も使えば取得できました。が、後続の処理の都合上、セレクターを1度使うのみで取得したいです」という文と「eq()」を使うコードを書いています。ですので「B. が不要だった」に関しては、そのあたりを読んで理解してほしかったです。

行動規範の内容に同意します

回答3件

:eq() (jQuery拡張セレクタ)

セレクタで実装したいのでしたら、まずは公式ドキュメントを確認しましょう。

As of jQuery 3.4, the :eq pseudo-class is deprecated. Remove it from your selectors and filter the results later using .eq().
(中略)
Additional Notes:
Because :eq() is a jQuery extension and not part of the CSS specification, queries using :eq() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").eq(index) instead.

日本語訳「jQuery 3.4以降、：eq疑似クラスは非推奨になりました。セレクターから削除し、後で.eq（）を使用して結果をフィルター処理します。

その他の注意事項：
：eq（）はjQuery拡張機能であり、CSS仕様の一部ではないため、：eq（）を使用したクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。最新のブラウザでパフォーマンスを向上させるには、代わりに$（ "your-pure-css-selector"）。eq（index）を使用してください。」

Selectors API (Web標準API)

標準のSelectors APIに当該機能が存在しないのは、セレクタがDOM上から検索する機能に特化しており、検索結果をフィルタする機能は範疇外という設計思想が反映された結果と考えています。
従って、jQuery v3.4以降では

querySelector() を使用後、jQueryオブジェクトに変換する
jQuery('your-selector-text')[0] で当該要素ノードを参照後、jQueryオブジェクトに変換する

という実装で、jQuery.prototype に生えたメソッドを使用する事になると思います。
(セレクタの使用回数は一回なので、質問の要件には適合します)

サンプルコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6</head>
7<body>
8
9<ol>
10    <li>li1</li>
11    <li>li2</li>
12    <li>li3</li>
13</ol>
14
15<ul>
16    <li><input type="text" name="ipt" value="012">
17    <li><input type="text" name="ipt" value="123">
18    <li><input type="text" name="ipt" value="234">
19</ul>
20
21<script>
22const jOList = [jQuery('input:eq(0)'), jQuery(jQuery('input')[0]), jQuery(document.querySelector('input'))];
23
24for (let jo of jOList) {
25  console.log(jo, jo[0]);
26}
27</script>
28
29</body>
30</html>

:nth-of-type()

jQueryのセレクターで、INPUT要素を
"[name=ipt]:nth-of-type(1)"
などと指定したいです。

:nth-of-type() の機能を誤認しています。

:nth-of-type() - CSS: カスケーディングスタイルシート | MDN

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

この場合は、タグ名を指定しなかったので、下記結果が返ってきます。

[name=ipt] を持つ全ての要素を兄弟要素ごとにグループ化する
グループ化された同じ兄弟要素郡の中で0番目のインデックスを持つ要素を参照します。

このセレクタで期待値を得るには、下記条件を満たす必要があります。

input要素以外の [name=ipt] を満たす要素が存在しない
全ての [name=ipt] が一つの兄弟要素郡に存在している

前述の繰り返しになりますが、:nth-of-type()はDOM上から検索する機能に特化しており、検索結果をフィルタする機能を備えていません。
フィルタする考え方の延長線には jQuery#filter がありますが、0番目のインデックスを持つ要素を得るには大仰で、

.filter() | jQuery API Documentation

要素ノードを一つだけ得るなら、jQuery#get(), jQuery#eq(), jQueryObject[0] の三択になると思います。

Re: miu_ras さん

投稿2021/05/17 00:35

編集2021/05/17 04:38

think49

総合スコア18189

think49

2021/05/17 02:25

個人的には、下記使い分けをします。　1. querySelectorを使用してWeb標準APIを利用　2. Web標準APIで網羅できない機能はquerySelectorからjQueryオブジェクトに変換 jQuery標準APIの大半は、Web標準APIで賄えますので、2.を要求するのはほぼjQuery plugin利用時に限定されます。

think49

2021/05/17 04:40

:nth-of-type() の説明を追記しました。 :nth-child() でも良く見られる認識違いですが、「DOMツリー上のインデックス値」と「検索結果のリストのインデックス値」を区別する必要があると考えます。

miu_ras

2021/05/17 05:31

「jQuery 3.4以降、:eq疑似クラスは非推奨」というのが少し気になりますが、「パフォーマンスを向上させるには」というだけの話のようなので、今回の場合は「:eq」を使うのが正解のようですね。「:nth-of-type」と「:eq」の違いを理解しました。ありがとうございました。

行動規範の内容に同意します

このHTMLであれば、$('ul>li:nth-of-type(1)>input')とできます。

投稿2021/05/16 22:24

maisumakun

総合スコア146018

miu_ras

2021/05/17 05:08

できました！ありがとうございました。

行動規範の内容に同意します

ベストアンサー

javascript
1    console.log($("[name=ipt]:eq(0)").val());
2    console.log($("[name=ipt]:eq(1)").val());
3    console.log($("[name=ipt]:eq(2)").val());