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では、そもそもできないような気がしていますが、
お知恵を拝借できましたら、大変ありがたいです。
拙い説明で恐縮ですが、どうぞよろしくお願いします。
不明点などあれば、何なりとお知らせください。
No.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 文字列で用意することをオススメします。
早速ありがとうございます!
おかげさまでいけました!
といっても、
$.map は今まで使用機会が無く、
どんな挙動なのかよくわかっておりませんので、これから調べます。
各種の記述方法もご提示いただき大変勉強になります。
> 泥臭いコーディングだと思います
幸か不幸か、こういった嗅覚を持ち合わせおりませんが、
ハイスキルの方が持つうらやましいアビリティですね。。
この度はご丁寧な対応を賜り、ありがとうございました!
またの機会がありましたら、どうぞよろしくお願いします。
No.2
- 回答日時:
オブジェクト配列が一番簡単でしょう
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:"ううう"},
];
↑これを作成する方法がわかっていません、すみません。。
形としては連想配列?になるのかと思うのですが、調べてみても
上記の形は出来上がっているところからの解説ばかりでそれ自体を作る工程が見当たりませんでした。
手順などアドバイスいただけますと嬉しいです。
どうぞよろしくお願いします。
No.1
- 回答日時:
ぜんかくくうはくは、はんかくにちかんしてください。
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は記述自体が理解できないものもあったりしますので、
解析に時間が掛かってしまってます。
コメントも細かくいただいて、感謝です!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PostgreSQL 画像とカテゴリーを出力したいのですが、取得の条件を付ける方法がわかりません。 2 2022/05/01 18:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
JavaScriptで、?マークとコロ...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
【jQuery】hoverしたn秒後にイ...
-
オブジェクトがありませんのエラー
-
大量のチェックボックス状態取...
-
【jQuery】遅延実行(タイムラ...
-
JS <a></a>タグ内のリンク先ア...
-
自閉式ツリーの修正について
-
大至急!!HPビルダー16の専...
-
jQuery タブメニューへのダイ...
-
javascriptで正規表現の検索が...
-
複数の写真がマウスで左右に移...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
変数内容をHTML内で表示する方法
-
指定したパスが現URLに含まれて...
-
読み込んだQRコードをフォーム...
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
どの<li><a> が押されたか判別...
-
javascriptでEnterキーをtabキ...
-
jQueryのeqで最後からn番目以降...
-
【javascript で動的に a タグ...
-
Jquery タブで、4つのliのうち...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
複数の画像をランダム(シャッ...
-
jqueryプルダウンメニュー個別着色
-
タブ切り替えの初期表示について
-
JavaScript インクリメントの書...
おすすめ情報