- ベストアンサー
jQuery配列の渡し方について
- jQueryでの配列の渡し方について質問があります。
- `jQuery.each`を使って配列の要素をリストに表示する方法について知りたいです。
- 特定の要素を指定した文字列に変換する方法も教えてください。
- Search_tmp
- お礼率52% (21/40)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2 のお礼への回答 hoge_a = "あああ,いいい,うううう"; hoge_b = "hoge,foo,dummy"; ならば // jQuery 的 var ids = hoge_b.split(','); var targetTab = $.map(hoge_a.split(','), function(value,index){ return {name:ids[index], val:value} }); // ES5 的 var ids = hoge_b.split(','); var targetTab = hoge_a.split(',').map(function(value,index){ return {name:ids[index], val:value} }); // ES3 的 var targetTab = []; var a = hoge_a.split(','); var b = hoge_b.split(','); var s = Math.min(a.length, b.length); // ちょっと丁寧に for (var i = 0; i < s; i++) targetTab.push({name:b[i], val:a[i]}); で、オブジェクトの配列 targetTab に変換できます。 しかし自分で書いててなんですが泥臭いコーディングだと思いますので、 データは最初からオブジェクトの配列、というより JSON 文字列で用意することをオススメします。
その他の回答 (2)
- Ogre7077
- ベストアンサー率65% (170/258)
オブジェクト配列が一番簡単でしょう var targetTab = [ { name:"hoge", val:"あああ"}, { name:"foo", val:"いいい"}, { name:"dummy", val:"ううう"}, ]; // jQuery 的 $.each(targetTab, function(){ $(document.createElement('li')).attr('id', this.name).text(this.val).appendTo('ul#tab'); }); // ES5 的 targetTab.forEach(function(o){ var x = document.querySelector('ul#tab').appendChild(document.createElement('li')); x.id = o.name; x.textContent = o.val; }); // ES3 的 for (var i in targetTab) { var x = document.querySelector('ul#tab').appendChild(document.createElement('li')); x.id = targetTab[i].name; x.textContent = targetTab[i].val; });
お礼
jQueryの記述がすぐ理解できました。 ありがとうございます！ 結果も思い通りです！ ただ、 hoge_a = "あああ,いいい,うううう"; hoge_b = "hoge,foo,dummy"; ※変数名をちょっと変えました ↑この状態から、 var targetTab = [ { name:"hoge", val:"あああ"}, { name:"foo", val:"いいい"}, { name:"dummy", val:"ううう"}, ]; ↑これを作成する方法がわかっていません、すみません。。 形としては連想配列？になるのかと思うのですが、調べてみても 上記の形は出来上がっているところからの解説ばかりでそれ自体を作る工程が見当たりませんでした。 手順などアドバイスいただけますと嬉しいです。 どうぞよろしくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくにちかんしてください。 jQuery の使い魔がそれようにかいとうするかもね。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <body> <ol id="hoge"></ol> <script> //まずOLを指定する var ol = document.querySelector ('#hoge'); // olにliがあれば削除する。（子ノード） while (ol.hasChildNodes ()) ol.removeChild (ol.firstChild); var targettab = 'あああ,いいい,うううう'.split (','); //liノードを作る関数 function createAndAppendListNode (text, no) { var ol = this; var doc = ol.ownerDocument; var li = doc.createElement ('LI'); li.id = 'no' + no;//数字で始まってはだめ！ li.appendChild (doc.createTextNode (text)); ol.appendChild (li); } //Array.forEach を利用して一気に処理する targettab.forEach (createAndAppendListNode, ol); //-- var targetstrings = 'hoge,foo,dummy'.split (','); //li要素を取得します var lis = document.querySelectorAll ('#hoge > li'); //ノードリストなので配列にする lis = Array.prototype.splice.call (lis, 0); //要素のidを変更する関数 function replaceId (li, idx) { var targetstrings = this; li.id = targetstrings[idx]; } //一気に処理する lis.forEach (replaceId, targetstrings); //結果を検証する alert ( Array.prototype.map.call ( document.querySelectorAll ('#hoge > li'), function (li) { return [ 'Name:' + li.tagName, 'Id :' + li.id, 'Text:' + li.firstChild.data ].join (", "); } ).join ("\n") ); </script>
お礼
ありがとうございます！ 手前のスキルレベルですとピュアなjsは記述自体が理解できないものもあったりしますので、 解析に時間が掛かってしまってます。 コメントも細かくいただいて、感謝です！
お礼
早速ありがとうございます！ おかげさまでいけました！ といっても、 $.map は今まで使用機会が無く、 どんな挙動なのかよくわかっておりませんので、これから調べます。 各種の記述方法もご提示いただき大変勉強になります。 > 泥臭いコーディングだと思います 幸か不幸か、こういった嗅覚を持ち合わせおりませんが、 ハイスキルの方が持つうらやましいアビリティですね。。 この度はご丁寧な対応を賜り、ありがとうございました！ またの機会がありましたら、どうぞよろしくお願いします。