• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：jQueryの配列の渡し方について）

jQuery配列の渡し方について

このQ&Aのポイント
  • jQueryでの配列の渡し方について質問があります。
  • `jQuery.each`を使って配列の要素をリストに表示する方法について知りたいです。
  • 特定の要素を指定した文字列に変換する方法も教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答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 文字列で用意することをオススメします。

Search_tmp
質問者

お礼

早速ありがとうございます！ おかげさまでいけました！ といっても、 $.map は今まで使用機会が無く、 どんな挙動なのかよくわかっておりませんので、これから調べます。 各種の記述方法もご提示いただき大変勉強になります。 > 泥臭いコーディングだと思います 幸か不幸か、こういった嗅覚を持ち合わせおりませんが、 ハイスキルの方が持つうらやましいアビリティですね。。 この度はご丁寧な対応を賜り、ありがとうございました！ またの機会がありましたら、どうぞよろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答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; });

Search_tmp
質問者

お礼

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>

Search_tmp
質問者

お礼

ありがとうございます！ 手前のスキルレベルですとピュアなjsは記述自体が理解できないものもあったりしますので、 解析に時間が掛かってしまってます。 コメントも細かくいただいて、感謝です！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryでXMLを操作

    jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>

  • 配列の作り方について

    知識のある方に是非とも配列の作り方について ご教示いただきたいです。 <ul id="hoge"> <li><a href="#number1">テキスト1</a></li> <li><a href="#number2">テキスト2</a></li> <li><a href="#number3">テキスト3</a></li> </ul> このコードをJqueryで以下のように、 各々のURLとテキストの中身を配列に入れたいのですが どうjqueryを組めば良いかご教示頂けますでしょうか。 [number1,テキスト1] [number2,テキスト2] [number3,テキスト3] 申し訳ございませんが宜しくお願い致します。

  • jQueryのコードで分からない箇所があります

    プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)

  • jQueryタブメニュー内へのリンク方法。

    javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。

  • jQueryでHTML表示の部分

    jQueryで表示されるデータをHTMLで表示するのですが、 色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、 いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No：1　Title：タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、 どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No：1　Title：タイトル</li> ----------------------------------- こんな感じに表示させたいのです。 大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> <div id="demo"> <h4>リスト</h4> </div>

  • jQueryオブジェクトに対する変更

    jQueryオブジェクトに対する変更は可能？ ちょっと特殊！？なのかもしれませんが、下記の内容が実現できるかどうかを検証しております。 悩んでいるポイントは「←　ココ」の部分です。 良いアイデアをお持ちの方、是非御教示願い申し上げます。 ＜サンプルHTML＞ <p id="hogehoge"> <ul> <li>aaaaaa</li> <li>bbbbbb</li> </ul> <div id="foo"><strong>cccccc</strong></div> </p> ＜実現したい事＞＝＝＝＝＝＝＝＝＝＝＝＝ var html_obj = $("p#hogehoge").clone(); // 特定のpタグを含むhtmlコードをオブジェクト化 // html_objに含まれる<ul>タグの内容を変更　　←　ココ // html_objに含まれる<div>タグの内容を変更　　←　ココ return html_obj // 関数の戻り値としてhtml_objを戻す。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜欲しい結果＞ <p id="hogehoge"> <ul> <li>zzzzzz</li> <li>xxxxxx</li> </ul> <div id="foo"><strong>yyyyyy</strong></div> </p>

  • jqueryの tabを使用して外部リンクをしたい

    jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>

  • jqueryで特定の要素をdivで囲う

    jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。

  • jQueryで複数あるUL要素の最後のLI要素以外を処理したい

    jQueryで複数あるUL要素の最後のLI要素以外を処理したい 現在、HTMLを <ul> <li>foo</li> <li>bar</li> <li>com</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>com</li>（※） </ul> 上記のように記述しています。 今回、jQueryを使い、2カ所あるUL要素の最後のLI要素以外を処理したいと思い、 $(function(){ $("ul li:not(:last)").css("～","～"); }); 以上のようにjQueryを記述したところ、1カ所目の最後のLI要素は無視されCSSが追加されてしまいました。 1カ所目・2カ所目とも同じように処理するにはどうしたら良いでしょうか？ ご指導・ご鞭撻のほど、よろしくお願いします。

    • ベストアンサー
    • AJAX
  • 配列の作り方について

    知識のある方に教えて頂きたく存じます。 以下のようにリストが4つあり、これらのアルファベットを 大文字小文字関係なく、アルファベット順にリストを並べ変えたいのですが jqueryでどのようにやればいいかご教示頂けませんでしょうか。 <ul id="hoge"> <li><a href="#number1">C</a></li> <li><a href="#number2">ab</a></li> <li><a href="#number3">AC</a></li> <li><a href="#number4">cb</a></li> </ul> 申し訳ございませんが、 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する