a[jQuery] 特定の要素の子孫に存在するフォームの状態を記憶したい

###やりたいこと

特定のフォームの入力を記憶して
get でわたすか sessionStrage に保存して次に訪れたときにフォームの内容を再現したい

###ためしたこと
以下のようにフォームの状態を　Get の query 風にエンコード＆再設定するコードをかいてみました

js
1<html>
2<head>
3  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
4</head>
5<body>
6  <input type="text" name="n1" id="i1">
7  <input type="number" name="n2" id="i2">
8  <select name="n3" id="i3"></select>
9  <select multiple name="n4" id="i4"></select>
10  <input type="checkbox" checked name="n5" id="i5">
11  <input type="checkbox" name="n5" id="i5">
12
13<script>
14  const formStateString = (base) => {
15    let query = '';
16    console.log(base.find('select:enabled, input[type="number"]:enabled, input[type="text"]:enabled'));
17    base.find('select:enabled, input[type="number"]:enabled, input[type="text"]:enabled').map(e => query = `${query? `${query}&` : ''}${$(e).attr('id')}=${$(e).val()}`);
18    base.find('input[type="checkbox"]').map(e => query = `${query? `${query}&` : ''}${$(e).attr('id')}=${$(e).prop('checked')}`);
19    return query;
20  }
21
22  const setParams = (params) => {
23    if(params) {
24      params.split('&').map(q => {
25        [id, val] = q.split('=');
26        if($(`#${id}`).attr('type') == 'checkbox')
27          $(`#${id}`).prop('checked', val == 'true');
28        else
29          $(`#${id}`).val(val);
30      });
31    }
32  };
33
34  formStateString($('body'));
35</script>
36</body>
37</html>

適当なフォームの HTML をかいて実行したところ
Cannot read property 'toLowerCase' of undefined
at jQuery.fn.init.val
とエラーが出ます

ソース内にあるように find の結果に対してデバッグ出力をはさんだところ
配列の最後に prevObject: jQuery.fn.init(1)というのがついていました

find の結果には子孫要素をだけが含まれると思っていたのですが
この関数？　ハッシュ？　は何なのでしょうか

find 以外に親要素をうけとって子孫の中のフォーム要素を選択する方法があれば教えていただけるとありがたいです

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

回答2件

ベストアンサー

.map()を誤解しているのでは？繰り返し処理したいなら.each()です。
https://api.jquery.com/map/
https://api.jquery.com/each/

投稿2018/09/11 01:00

x_x

総合スコア13749

退会済みユーザー

2018/09/11 02:17

すいません　まったくおっしゃるとおりなんですが最近 each 関連ではまってしまったので https://teratail.com/questions/145421 念のためにこの回答をお借りしてループ内でオブジェクトが取り出せてるか確認しているところでした一応返り値の配列を作る分無駄があるのですが　破壊的代入に関しては each とかわらないかなと思ったので… ただ、まだ map が適用される前の find の返り値の段階で変な値が入ってしまってるみたいなのです