PHPで表示させたいリストの絞り込み方法について

このQ&Aのポイント
  • PHPで表示させたいリストの絞り込み方法について教えてください。
  • 現在はまるっと読み込んで表示していますが、情報が多くなってきて個別に絞り込みたいです。
  • 特定の条件に合うリストのみを表示させる方法を教えてください。
回答を見る
  • ベストアンサー

PHPで読み込むリストを選ぶ

新着情報ページについて <読み込み元>全ての新着情報の一覧リストファイル <ul> <li class="tokyo">10月に東京でイベントを開催しました</li> <li class="tokyo">9月に東京でイベントを開催しました</li> <li class="osaka">8月に大阪でイベントを開催しました</li> <li class="osaka">7月に大阪でイベントを開催しました</li> <li class="tokyo">6月に東京でイベントを開催しました</li> </ul> 読み込み先1:indexページ、最新の3件のリストを表示 読み込み先2:東京ページ、class="tokyo"のみを表示 読み込み先3:大阪ページ、class="osaka"のみを表示 現在はrequire_onceでまるっと読み込み、display:none;で非表示にすることでごまかしていますが、情報が多くなってきて限界を感じております。 PHPで表示させたいリストのみを絞り込んで読み込むことは可能でしょうか? ご教授のほどよろしくお願いいたします。

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

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

  • ベストアンサー
  • agunuz
  • ベストアンサー率65% (288/438)
回答No.1

indexページでの最新3件ってどうやっているんですか?CSSでdisplayを指定しているなら新着用のセレクタも必要だと思いますが・・・ <li class="tokyo new">10月に東京でイベントを開催しました</li> <li class="tokyo new">9月に東京でイベントを開催しました</li> <li class="osaka new">8月に大阪でイベントを開催しました</li> <li class="osaka">7月に大阪でイベントを開催しました</li> <li class="tokyo">6月に東京でイベントを開催しました</li> requiore_onceで読み込まずに(ul要素の開始・終了はファイルから省いておいて)、たとえば東京ページなら echo '<ul>' . PHP_EOL; foreach (file('new.txt', ) as $val) { if (strpos($val, 'class="tokyo') === false) { continue; } print $val; } echo '</ul>' . PHP_EOL; でいいのでは? indexページなら $ct = 0; echo '<ul>' . PHP_EOL; foreach (file('new.txt', ) as $val) { if ($ct++ >= 3) { break; } print $val; } echo '</ul>' . PHP_EOL; でいいですよね。

root2w
質問者

お礼

ありがとうございます。 大変参考になるお答えと迅速なご対応、誠に感謝です。 ちなみに新着3件以外は疑似クラスで非表示にしておりました。 #topinfo ul li:nth-child(n+2) {display: none;}

その他の回答 (1)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

どのように情報を取得しているかにもよりますが、通常は、リストの件数がよほどの数(数百・数千など)にならない限り、それによって遅くなることはほぼないと思います。したがって、CSSで表示を制御する方法は、ごまかしなどではなく、正攻法といえます。また、display:noneはGoogleなどの検索ボットにも無視されるので、SEO的にも何ら問題ありません。 ただ、PHP側、あるいは、DBのクエリで、よほど無茶苦茶な内容が書かれている場合は、1件の取得にも時間がかかる場合もあるでしょう。また、「そのページに必要のない情報を読み込んでいる」という部分だけを見ると、たしかに無駄があるとは思います。その意味でも、PHPを改修したほうがよいとみなせる部分もあります。 しかしながら、「PHPで表示させたいリストのみを絞り込んで読み込む方法がわからない」は、「PHPとはなんですか?」という質問とほぼ同じです。それぐらい基本的なことです。もっと言えば、小学一年生の子が「自分の名前が書けません」と言ってるようなものです。「どうすれば名前を書けるようになりますか」と言われても、応える側はかなり骨が折れます。 まずは、基本を学んでください。 つまり、最低限、自分の名前を書けるようにしてください。 他の人に頼るのは、それからですね。

関連するQ&A

  • PHPで連番を繰り返す

    現在、PHPを使用してサイトを制作しているなかで、以下のようにCSSのクラスを振りたい部分があります。 <ul> <li class="list1">リスト</li> <li class="list2">リスト</li> <li class="list3">リスト</li> <li class="list4">リスト</li> <li class="list1">リスト</li> <li class="list2">リスト</li> <li class="list3">リスト</li> <li class="list4">リスト</li> </ul> 上記のように「4までいったら1に戻り、これを8回ループさせる」ということをするには、どのように処理を書けばよいでしょうか。 while文やfor文などで試行錯誤していますが、なかなか思うようにいきません。 よろしくお願いいたします。

    • 締切済み
    • PHP
  • 横並びサイトマップをリスト要素で構築したいけど..

    お世話になります。 現在制作中のWebサイトで、訪問者のためのサイトマップを構築したいと考えています。 ページ数が少ない関係で一般的によく見るサイトマップとは違い、横並びのサイトマップにしたいと考えています。(添付画像のようなデザインです。) 三層式とでもいうのでしょうか、ふたつめの店舗案内の欄に、ふたつに分かれるページ(情報1ページと情報2ページ)があり、さらに情報1~4とコンテンツごとに分類してあるものです。 一層目のコンテンツ下部にはbackground-img no-repeat bottomでドット線の画像を表示させたいです。参考書など見ながら記述してみたのですが、全くといっていいほどいまくいかず、困ってしましました。すべてのリストが左端へ順番に並んでいるようなレイアウトになってしまいました...。 絶対私のHTML/CSSの記述がおかしいことは理解できるのですが、どこを直せばいいのかも分からない状態です。どうかご教授いただけたらと思い、質問させていただきました。 よろしくお願いします。 HTML--- <div id="info_sitemap"> <ul> <li>TOPページ</li> <li>店舗案内 <ul> <li class="01">情報ページその1 <ul> <li class="03">コンテンツ1</li> <li class="03">コンテンツ2</li> <li class="03">コンテンツ3</li> <li class="03">コンテンツ4</li> </ul> </li> <li class="01">情報ページその2</li> <li class="01">情報ページその3</li> </ul> </li> <li>ご利用方法 <ul>   <li class="02">情報01</li>  <li class="02">情報02</li>   <li class="02">情報03</li>     <li class="02">情報04</li> </ul> </li> <li>業務案内 <ul>   <li class="02">情報01</li>  <li class="02">情報02</li>   <li class="02">情報03</li>     <li class="02">情報04</li> </ul> </li> <li>ブログ</li> <li>お問い合わせ</li> </ul> </div> CSS--- #info_sitemap { width:660px; } #info_sitemap ul { list-style:none; margin:0; padding:0; } #info_sitemap ul li { background:url(../images/contact_03.jpg) no-repeat bottom; font-family:"じゅん 34", "ヒラギノ丸ゴ Pro", monospace, fantasy; background-color:pink; width:100px; } #info_sitemap ul ul { list-style:none; margin:0; padding:0; } #info_sitemap ul ul li.01 { width:100px; background-color:green; } #info_sitemap ul ul li.02 { width:100px; background-color:green; display:block; } #info_sitemap ul ul ul { list-style:none; margin:0; padding:0; } #info_sitemap ul ul ul li.03 { display:block; float:left; background-color:blue; width:100px; }

    • ベストアンサー
    • CSS
  • jQueryでリストを分割してページ送りを表示

    現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…? [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>

  • 2種類のリスト項目をjQueryを使って揃えたい

    スマートフォンサイト制作中です。 やりたい事は 横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。 以下のようなリストがあって、 2種類のulを横並びにしています。 (2列のテーブルみたいな感じ) <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いので それに合わせてclass="column1"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな?? …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • HTMLタグ リストの入れ子とNetscapeについて

    HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ(IE8、Opera、Safari、FireFox)では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00  ccccの更新 *更新履歴* 2000/00/00  aaaaの更新 2000/00/00  bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00  ccccの更新 *更新履歴* 2000/00/00  aaaaの更新  2000/00/00  bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか? それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。

    • ベストアンサー
    • HTML
  • ulを使ったパンくずリストの使い方で困っています

    ulを使ったパンくずリストの使い方で困っています パンくずリスト初めに現在位置という見出しを付けたいんですが <div id="pankuzulist"> <h3>現在位置</h3>もしくは<spna>現在位置</span> <ul> <li>1_page</li> <li>2_page</li> <li>3_page</li> <ul> </div> と <ul> <li>現在位置 <ul> <li>1_page</li> <li>2_page</li> <li>3_page</li> </ul> </li> </ul> という書き方を考えたんですけどこれはタグの使い方等々などから考えた場合どちらを使うべきでしょうか?

  • リストを作りたいです

    CSSを使ってリストを作っています。 <ul> <li>~~~</li> <li>~~~</li> <li>~~~</li> </ul> という感じにしています。 これを、リストの中にリストがあるようにしたいのですが、どうすればいいでしょうか? ●花  □バラ  □桜  □梅 ●果物  □イチゴ  □バナナ  □すいか ●乗り物  □バス  □新幹線  □飛行機 ↑こういった表示にしたいと思っています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • リストの回り込みについて(マーカーの位置がずれます

    助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。

    • ベストアンサー
    • HTML
  • リストの高さを揃えたい

    リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。(図があります) どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです (HTML) <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> (CSS) .sample{ text-align: left; valign: top; padding: 0px; border: none; }

    • ベストアンサー
    • CSS
  • CSSのリストスタイルについて

    別の人が作成したホームページの更新をしています。 そのホームページ全体に ul と li に list-style-noneのスタイルシートがかかっています。 新規に作成するページで 数字のリスト 1.目次 2.手引きについて 3.今後の流れについて というような数字のリストを作成したいのですが <ol> <li>目次</li> <li>手引きについて</li> <li>今後の流れについて</li> </ol> とすると通常目次についての前に数字の1が 手引きについての前に数字の2が表示されるかと思うのですが 表示されません。 ulとliのlist-style-noneになってるからなのですが これは他のページがくずれるので解除できません。 どのような記述をすれば表示されるでしょうか? 初歩的な質問で申し訳ありませんが ご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS

専門家に質問してみよう