最近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() { /* 処理 */ });
↧