jQueryでの配列の渡し方についてご質問です。 jQueryではなくjavascriptでも良いのですが、不慣れなのでjQueryで試行しています。 ---------------------------------------------- targettab = targettab.split( ',' ); jQuery.each(targettab, function(i, val) { var livetab = " " + val + " "; jQuery(livetab).appendTo(jQuery("ul#tab")); }); ---------------------------------------------- ※変数 targettab に「あああ,いいい,うううう]という値が入っています。こう↑書きますと、ul#tabの内部にあああいいいうううと入り、リストが生成されます。ここまでは良いのですが、このそれぞれのidに入っている数字を任意の文字列にしたいです。例えば、 targetstrings = "hoge,foo,dummy"; targetstrings = targetstrings.split( ',' ); という配列を差し込んで、最終的にあああいいいうううという形で整形したいです。 jQuery.eachでは、そもそもできないような気がしていますが、お知恵を拝借できましたら、大変ありがたいです。拙い説明で恐縮ですが、どうぞよろしくお願いします。不明点などあれば、何なりとお知らせください。

jQueryの配列の渡し方について

解決済

質問者：Search_tmp
質問日時：2013/10/23 19:23
回答数：3件

jQueryでの配列の渡し方についてご質問です。
jQueryではなくjavascriptでも良いのですが、不慣れなのでjQueryで試行しています。

----------------------------------------------
targettab = targettab.split( ',' );

jQuery.each(targettab, function(i, val) {
var livetab = "<li id='" + i + "'>" + val + "</li>";
jQuery(livetab).appendTo(jQuery("ul#tab"));
});
----------------------------------------------
※変数 targettab に「あああ,いいい,うううう]という値が入っています。

こう↑書きますと、ul#tabの内部に
<li id='1'>あああ</li>
<li id='2'>いいい</li>
<li id='3'>ううう</li>
と入り、リストが生成されます。
ここまでは良いのですが、このそれぞれのidに入っている数字を任意の文字列にしたいです。

例えば、
targetstrings = "hoge,foo,dummy";
targetstrings = targetstrings.split( ',' );
という配列を差し込んで、最終的に
<li id='hoge'>あああ</li>
<li id='foo'>いいい</li>
<li id='dummy'>ううう</li>
という形で整形したいです。

jQuery.eachでは、そもそもできないような気がしていますが、
お知恵を拝借できましたら、大変ありがたいです。

拙い説明で恐縮ですが、どうぞよろしくお願いします。
不明点などあれば、何なりとお知らせください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2013/10/24 13:12

#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 文字列で用意することをオススメします。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます！
おかげさまでいけました！

といっても、
$.map は今まで使用機会が無く、
どんな挙動なのかよくわかっておりませんので、これから調べます。
各種の記述方法もご提示いただき大変勉強になります。

> 泥臭いコーディングだと思います
幸か不幸か、こういった嗅覚を持ち合わせおりませんが、
ハイスキルの方が持つうらやましいアビリティですね。。

この度はご丁寧な対応を賜り、ありがとうございました！
またの機会がありましたら、どうぞよろしくお願いします。

通報する

お礼日時：2013/10/24 17:25

No.2

回答者： Ogre7077
回答日時：2013/10/24 00:21

オブジェクト配列が一番簡単でしょう

- 0
- 件

通報する

この回答へのお礼

jQueryの記述がすぐ理解できました。
ありがとうございます！
結果も思い通りです！

ただ、

hoge_a = "あああ,いいい,うううう";
hoge_b = "hoge,foo,dummy";
※変数名をちょっと変えました

↑この状態から、

var targetTab = [
{ name:"hoge", val:"あああ"},
{ name:"foo", val:"いいい"},
{ name:"dummy", val:"ううう"},
];

↑これを作成する方法がわかっていません、すみません。。
形としては連想配列？になるのかと思うのですが、調べてみても
上記の形は出来上がっているところからの解説ばかりでそれ自体を作る工程が見当たりませんでした。
手順などアドバイスいただけますと嬉しいです。

どうぞよろしくお願いします。

通報する

お礼日時：2013/10/24 10:45

No.1

回答者： babu_baboo
回答日時：2013/10/23 22:31

ぜんかくくうはくは、はんかくにちかんしてください。

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>