jQueryで名前で選択

今日の投稿では、jQuery で name 属性を使用して要素を選択する方法について説明します。

jQueryで名前で選択

CSS 仕様では、属性に基づいて要素を識別することができます。 一部の古いブラウザではドキュメント デザインの目的でサポートされていませんが、jQuery ではブラウザに関係なく使用できます。

以下の属性セレクターのいずれかを使用する場合、複数の値がスペースで区切られた属性に注意する必要があります。これらのセレクターは属性値を 1つの文字列と見なすためです。

以下は、name プロパティを使用して属性を選択する方法です。

1. 属性プレフィックス セレクター [name|="value"] - 指定された属性が指定された文字列と等しいか、または指定された文字列で始まり、その後にハイフンが続く項目を選択します。
2. 属性セレクタ [name*="value"] - 指定された部分文字列を含む値を持つ、指定された属性を持つアイテムを選択します。
3. 属性単語セレクタ [name~="value"] - スペースで区切られた特定の単語を含む値を持つ、指定された属性を持つアイテムを選択します。
4. セレクタ [name$="value"] で終わる属性 - 1つの特定の文字列で終わる値を持つ、指定された属性を持つアイテムを選択します。 比較では大文字と小文字が区別されます。
5. Attribute Equals Selector [name="value"] - 指定された値と正確に等しい値を持つ、指定された属性を持つアイテムを選択します。
6. セレクター [name^="value"] で始まる属性 - 指定された 1つの文字列で始まる値を持つ、指定された属性を持つアイテムを選択します。

次の例でそれを理解しましょう。

<button name="btn-0" value="hello world">Hello World!</button>

console.log($('[name="btn-0"]').val());
console.log($('[name^="btn"]').val());
console.log($('[name$="-0"]').val());
console.log($('[name*="tn-0"]').val());

上記の例では、名前 btn-0 と値 hello world を持つ 1つのボタンを定義しました。 ボタンは 4つの方法で選択できます。

最初のものは、ボタンの正確な名前を使用してボタンを選択します。 2つ目は、名前が btn で始まるボタンを選択します。

3つ目は、値が -0 で終わるボタンを選択します。 そして最後のものは、 name 属性が tn-0 を含むボタンを選択します。

jQuery をサポートするブラウザーで上記のコード スニペットを実行します。 以下の結果が表示されます。

出力：

"hello world"
"hello world"
"hello world"
"hello world"

デモ