連想配列からリストを作成する関数

このQ&Aのポイント
  • 連想配列からリストを作成する関数を作るには、liという関数を使います。
  • 以下のように連想配列の要素をli関数に渡すことで、HTMLのソースのようなリストが生成されます。
  • 生成されるHTMLは<ul>タグで囲まれ、連想配列の各要素が<li>タグと<a>タグで表現されます。
回答を見る
  • ベストアンサー

連想配列からリストを作成する関数

連想配列からリストを作成する関数を作ろうと思っています。 関数をどのように書けばHTMLのソースのようになるでしょうか? //----- 関数 ----- function li($v) { } //----- 配列 ----- $s[0] = array( 'Google' , 'https://www.google.co.jp/' , ' - 検索エンジン' ); $s[1] = array( 'Yahoo! JAPAN' , 'http://www.yahoo.co.jp/' , ' - 検索エンジン' ); $s[2] = array( 'Goo' , 'http://www.goo.ne.jp/' , ' - 検索エンジン' ); $s[3] = array( 'ツイッター' , 'https://twitter.com/' , ' - ミニブログ' ); li($s); //----- 生成されるhtml ----- <ul> <li><a href="https://www.google.co.jp/" title="Google">Google</a> - 検索エンジン</li> <li><a href="http://www.yahoo.co.jp/" title="Yahoo! JAPAN">Yahoo! JAPAN</a> - 検索エンジン</li> <li><a href="http://www.goo.ne.jp/" title="Goo">Goo</a> - 検索エンジン</li> <li><a href="https://twitter.com/" title="ツイッター">ツイッター</a> - ミニブログ</li> </ul> //----- print_r ----- array(4) {  [0]=>  array(3) {   [0]=>   string(6) "Google"   [1]=>   string(25) "https://www.google.co.jp/"   [2]=>   string(16) " - 検索エンジン"  }  [1]=>  array(3) {   [0]=>   string(12) "Yahoo! JAPAN"   [1]=>   string(23) "http://www.yahoo.co.jp/"   [2]=>   string(16) " - 検索エンジン"  }  [2]=>  array(3) {   [0]=>   string(3) "Goo"   [1]=>   string(21) "http://www.goo.ne.jp/"   [2]=>   string(16) " - 検索エンジン"  }  [3]=>  array(3) {   [0]=>   string(10) "ツイッター"   [1]=>   string(20) "https://twitter.com/"   [2]=>   string(14) " - ミニブログ"  } }

  • PHP
  • 回答数4
  • ありがとう数2

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.2

function li($v) { echo '<ul>'; foreach ($v as $t1) { echo '<li><a href="'.$t1[1].'" title="Google">'.$t1[0].'</a>'.$t1[2].'</li>'; } echo '</ul>'; }

synchro-night
質問者

お礼

t_ohtaさん 解答ありがとうございました。 うまくできるようになりました。 いろいろ カスタマイズができそうで 気にいりました。

その他の回答 (3)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

よほど自信がないかぎりhtmlに書きだすときは htmlspecialchars()を利用した方がよいでしょう

noname#244856
noname#244856
回答No.3

やっぱsprintfでしょ。 http://ideone.com/kBdlDy

synchro-night
質問者

お礼

To_aru_Userさん 解答ありがとうございました。 うまくできるようになりました。 sprintf ケースによって使い分けようと思います。

  • Tacosan
  • ベストアンサー率23% (3656/15482)
回答No.1

array( 'Google' , 'https://www.google.co.jp/' , ' - 検索エンジン' ) から <li><a href="https://www.google.co.jp/" title="Google">Google</a> - 検索エンジン</li> を作る関数を作ってループで回す. 前後を <ul> と </ul> ではさめば終わり.

関連するQ&A

  • htmlソースからアンカータグ内のURLを配列に

    お世話になっております。 file_get_contents()で取得したhtmlファイルのソースにある、アンカータグに設置されている、URLおよび、そのアンカータグに囲まれたテキストを取得して配列に収めたいと考えているのですが、いろいろと調べていても、思うような結果を出せずにいる状況です。 あるサイトにて、以下のようなソースがあり、これをヒントとしているものの、初めて目にする配列の中の配列?に戸惑い、その分解の仕方が分からず、またアンカータグ内に、target="_blank"などの記述があったりすると、配列に収めることが出来なかったりで、対処の仕方がwからずにいる状況です。 $html = ' <ul> <li><a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a></li> <li><a href="http://jp.msn.com/">MSN</a></li> <li><a href="http://www.google.co.jp/">Google</a></li> </ul> '; $pattern = '/<a href="([^"]+)">(.+?)<\/a>/is'; $match = array(); preg_match_all($pattern, $html, $match, PREG_SET_ORDER); var_export($match); echo "<br><br>"; print_r($match); 知識が乏しく、お恥ずかしいところと思うことろではありますが、アドバイスなど頂戴できれば幸いです。 お忙しいなか恐縮ですが、宜しくお願い申し上げます。

    • ベストアンサー
    • PHP
  • Smartyで多次元配列をスマートに出力するには?

    Smartyで多次元配列をスマートに出力するには? ■php側 $array1[1] = 'ショッピング案内'; $array1[2] = 'サイト案内'; $array1[3] = 'お問い合わせ'; $array2[1][1] = '0101'; $array2[1][2] = '0102'; $array2[1][3] = '0103'; $array2[1][4] = '0104'; $array2[1][5] = '0105'; $array2[2][1] = '0201'; $array2[2][2] = '0202'; $array2[2][3] = '0203'; $array2[2][4] = '0204'; $array2[2][5] = '0205'; $array2[2][6] = '0206'; $array2[2][7] = '0207'; $array2[3][1] = '0301'; $array2[3][2] = '0302'; $array2[3][3] = '0303'; $array2[3][4] = '0304'; $array3[1][1] = 'お買い物の流れ'; $array3[1][2] = 'お支払いについて'; $array3[1][3] = '配送について'; $array3[1][4] = '返品・交換について'; $array3[1][5] = 'メールマガジンについて'; $array3[2][1] = 'サイトマップ'; $array3[2][2] = 'このサイトについて'; $array3[2][3] = '販売者概要'; $array3[2][4] = '特定商取引法表記'; $array3[2][5] = 'プライバシーポリシー'; $array3[2][6] = '免責事項'; $array3[2][7] = 'リンクについて'; $array3[3][1] = 'FAQ(よくある質問)'; $array3[3][2] = 'お買い物について質問'; $array3[3][3] = '個別商品について質問'; $array3[3][4] = 'お問合せ対応時間'; $sub_menu = array($array1, $array2, $array3 ); $smarty->assign('SUB_MENU', $sub_menu); ■テンプレート側のサンプル <dl class="side_column"> <dt class="block_title">{$SUB_MENU[0][1]}</dt> <dd class="block_contents"> <ul class="sub_menu"> <li><a href="index.php?contents={$SUB_MENU[1][1][1]}">{$SUB_MENU[2][1][1]}</a></li> <li><a href="index.php?contents={$SUB_MENU[1][1][2]}">{$SUB_MENU[2][1][2]}</a></li> <li><a href="index.php?contents={$SUB_MENU[1][1][3]}">{$SUB_MENU[2][1][3]}</a></li> <li><a href="index.php?contents={$SUB_MENU[1][1][4]}">{$SUB_MENU[2][1][4]}</a></li> <li><a href="index.php?contents={$SUB_MENU[1][1][5]}">{$SUB_MENU[2][1][5]}</a></li> </ul> </dd> </dl> テンプレート側の繰り返し処理の仕方をご教示くださいませ。 もっと効率よくスマートに実現できる方法がありましたらそちらもよろしくお願いします。 どうぞよろしくお願いします。

    • 締切済み
    • PHP
  • cssで作成する多階層リスト

    こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">TEST(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">TEST(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "MS Pゴシック", "MS PGothic", "MS UI Gothic", "MS ゴシック", "MS 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※.子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }

  • CSS入れ子リストを作成したい

    CSS初心者です。 1,リスト 1-1,○○○○○ 1-2,○○○○○ 2,モデル 2-1,○○○○○ 2-2,○○○○○ 3,まとめ のような入れ子リストを作成したいのですが 現在の ■HTML <ol class="sample1"> <li>リスト</li> <li>○○○○○</li> <li>○○○○○</li> <li>モデル</li> <li>○○○○○</li> <li>○○○○○</li> <li>まとめ</li> </ol> ■CSS ol.sample1{ counter-reset:list; list-style-type:none; font: 14px/1.6 'arial narrow', sans-serif; padding:0; } ol.sample1 li{ position:relative; margin: 7px 0 7px 0px; padding-left:40px; font-weight: bold; font-size:14px; line-height: 30px; border: solid 1px #F6A38B; border-radius:20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } ol.sample1 li:before{ counter-increment: list; content: counter(list); position: absolute; left: 0px; width: 30px; height: 30px; text-align: center; color: #fff; line-height:30px; background: #F6A38B; border-radius: 50%; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample1 li:hover{ background: #F6A38B; color: #fff; } ol.sample1 li:hover:before{ background: #fff; color: #F6A38B; } をHTMLを下記に変更して上の例のような入れ子にするには 上記のCSSをどのように変更すればいいのでしょか? ■HTML <ol class="sample1"> <li><a href="">リスト</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">モデル</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">まとめ</a></li> </ol> よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 指定した配列と一致したデータを削除したい

    下記のような形でarrayに該当する文字列を含んだhrefとその親要素をremoveChildで削除したいのですが、hrefからarrayに該当するデータだけを取り出すにはどうしたら良いのかが分かりません。 何か良い方法がありましたらアドバイスを頂ければと思います。 よろしくお願い致します。 var array = [ "example.com", "example.net", "subdomain.example.org", "example.jp/subdirectory" ]; var links = document.getElementsByTagName("a"); var href = links.getAttribute("href"); var parent = links.parentNode; document.body.removeChild(取り出したデータ); // html <ul> <li><a href="http://example.com ">A</a></li> <!-- リストアイテムごと消える --> <li><a href="http://example.net/subdirectory/post.html ">B</a></li> <!-- リストアイテムごと消える --> <li><a href="https://example.org ">C</a></li> <!-- 消えない --> <li><a href="http://example.jp/subdirectory/post.html ">D</a></li> <!-- リストアイテムごと消える --> </ul> <a href="https://subdomain.example.org ">E</a> <!-- 消える -->

  • リスト要素を横に並べたらずれました!!

    関係ありそうなHTMLとCSSは以下のあたりだと思います。 もしかすると違うかも知らませんが? 足りなければ追記します。 画像のようにブロックがずれてしまいます。どうすれば 綺麗にならべて表示できるでしょうか? よろしくお願いします。 ---HTML------------------------------------------------------------- <div id="sidebar2"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="http://www.ceek.jp/" target="_blank">CEEK.JP</a></li> <li><a href="http://www.google.co.jp/" target="_blank">Google</a></li> <li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo</a><a href="https://login.yahoo.co.jp/config/login_verify2?.src=ym" target="_blank">【Yahoo:ログイン】</a></li><li><a href="http://search.yahoo.co.jp/realtime" target="_blank">Yahoo検索リアルタイム</a></li> <li><a href="http://buzztter.com/#/ja" target="_blank">buzztter</a></li> </ul> </dd> </dl> --css------------------------------------------------------------------- #sidebar2 { float: right; width: 70%; } #sidebar2 ul>li { display:inline-block; width: 250px; height: 50px; font-size: 13px; text-decoration: none; text-align: center; padding: 4px; background: #009999; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar2 ul>li:hover { background: #99CCFF; } #sidebar2 ul>li>a{ text-decoration: none; color: #FFFFFF; display: block; }

    • ベストアンサー
    • CSS
  • 2次元連想配列配列の使用方法

    こんばんは。 次のような配列 "http://www.yahoo.co.jp", "Yahoo!" "http://www.google.co.jp", "google" (...以下同様...) で aryLink[0]["URL"] → "http://www.yahoo.co.jp" aryLink[1]["Text"] → "google" というように参照できるようにしたいのですが 下記のスクリプトで「'aryLink[...]'はまたはオブジェクトではありません」というエラーになってしまいます。 どうすればよいのでしょうか?教えてください。 よろしくお願いします。 -- var DEBUG=1; aryLink = new Array(2); for (i = 0; i < aryLink.length; i++) { aryLink[i] = new Array(); } var IE = WScript.CreateObject("InternetExplorer.Application"); IE.Navigate("http://www.yahoo.co.jp"); while(IE.busy); while(IE.Document.readyState != "complete"); var objTagsAs = IE.Document.all.tags("A"); if(DEBUG) { for (i = 0; i < 5; i++) { WScript.Echo(objTagsAs[i] + "," + objTagsAs[i].innerText); } } for (i = 0; i < objTagsAs.length; i++) { aryLink[i]["URL"] = String(objTagsAs[i]) aryLink[i]["Text"] = String(objTagsAs[i].innerText); }

  • css リストを右揃えにできません。。。

    非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます(Mac safari firefox)。 なんで~~?? どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!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> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • javascript, getElementsByTagName('a')

    つい先日質問させて頂きまして理解出来たと思っていたのですが、 やはり目的が達成出来ず、困っています。 <ul> <li><a href="http://yahoo.co.jp/">Yahoo!</a></li> <li><a href="http://google.co.jp/">Google</a></li> <li><a href="http://goo.ne.jp/">Goo</a></li> <li><a href="http://amazon.co.jp">Amazon</a></li> <li><a href="http://bing.com">bing</a></li> </ul> このリストの1番目と3番目のテキスト部分のみを抜き出したいと思います。 var user=document.getElementsByTagName('a')[0]; var chara=document.getElementsByTagName('a')[2]; これをそれぞれdocument.writeすれば値を表示させられると思ったのですが出来ませんでした。表示されるのはURLが表示されてしまいます。先日の回答では属性を表示するには他のものを指定しなければと教えて頂きましたが、このスクリプトを動作させればURLが表示されます。 非常に困っているのでまた教えて頂けないでしょうか? 連続質問誠に申し訳御座いません。ググっても全くわかりませんでした。

  • 検索サイト作成について

    今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか?よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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"​ xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>

専門家に質問してみよう