input:hiddenを少し便利にする

最近input:hiddenを使う機会があったので良い方法がないか模索

注意

初投稿なので至らないところがあると思いますが、過不足がありましたらコメントをお願い致します。
コードを使う場合は、ご自由に採用・改変してご利用ください。
ご利用に対するあらゆる影響に関して責任は持てません。

目標

input:hiddenを少し扱いやすくする。
複数の要素がある場合は、input:hiddenのnameをkeyとするハッシュオブジェクトを返す。
要素名を指定した場合は、input:hidden[name="name"]のjQueryオブジェクトを返す。

環境

• Ubuntu 20.4
• HTML5
• CSS3
• javascript
• jQuery 3.6.0
• npm 7.17.0
• Pug

試したこと

hiddenを手軽に扱う小さいモジュールを書く

(function( $ ) {
	$.fn.hiddens = function(name) {
		var $hiddens = this.children("input:hidden");

		var hids = new Object();
		if(name) {
			hids = $(this.children('input:hidden[name="' + name + '"]')[0]);
		} else {
			for(let i=0; i<$hiddens.length; i++) {
				let h = $hiddens[i];
				hids[h.name] = $(h);
			}
		}
		return hids;
	};
})( jQuery );

使い方

<!-- 略 -->

<form id="test">
  <input type="hidden" name="spaceA" value="A" />
  <input type="hidden" name="spaceB" value="B" />
</form>

<!-- 略 -->

// ex1 : 指定なし => ハッシュ(key=name, value=jQueryオブジェクト)
var hids = $('form#test').hiddens();
var hidA = hids['spaceA'];
var hidB = hids['spaceB'];
console.log("tag info: ", hidA.attr("type"), hidA.attr("name"), hidA.attr("value")); // tag info: hidden spaceA A
console.log("hidden A: ", hidA.val()); // hidden A: A
console.log("hidden B: ", hidB.val()); // hidden B: B

// ex2 : 要素を指定 => jQueryオブジェクト
var hid = $('form#test').hiddens("spaceA");
console.log("tag info: ", hid.attr("type"), hid.attr("name"), hid.attr("value")); // tag info: hidden, spaceA A
console.log("hidden A: ", hid.val()); // hidden A: A
hid.val("hiddens");
console.log("update A: ", hid.val()); // update A: hiddens

結論

個別に扱う場合は、少し扱いやすくなった気がする（個人の感想です）。
idでも指定できると良いが要改良。
複数の要素にアクセスしたい場合は、従来通り。

$('form#id:hidden[name^="prefix"]').each(function() { /* 処理 */ });