- ベストアンサー
<li></li>の数を制限
下記のソースのように<li>タグが多数あるものを 上から3つのみを表示させるような形にしたいのですが （<li></li>を上から3つのみに制限） どのようなスクリプトを書けば良いでしょう？ <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ご伝授いただけるととても助かります！
- renarena85
- お礼率9% (2/21)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
表示しない場合、表示させる仕組みはいらないのですか？ 最近のブラウザならnth-childなんて疑似クラスもあるみたいですが （当然IEは非対応） <style> #box li{ display:none } #box li:nth-child(1),#box li:nth-child(2),#box li:nth-child(3){ display:list-item; } </style> <div id="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
その他の回答 (2)
- chochobizo
- ベストアンサー率42% (30/70)
回答番号：No.1に関して HTML読込終了後にscriptを走らせないとダメじゃないでしょうか？ ～省略 <script type="text/javascript"> window.onload=function() { var e = document.getElementById('box').getElementsByTagName('li'); for (var i=3; i<e.length; i++) e[i].style.display = 'none'; } </script> ～省略
お礼
ありがとうございました！実装できました！
- fujillin
- ベストアンサー率61% (1594/2576)
4つ目以降を非表示にするのでよければ、こんな感じ？ var e = document.getElementById('box').getElementsByTagName('LI'); for (var i=3; i<e.length; i++) e[i].style.display = 'none';
補足
教えていただいた形でトライしてみましたが うまく動作してくれません。。。 記述がおかしいでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> var e = document.getElementById('box').getElementsByTagName('li'); for (var i=3; i<e.length; i++) e[i].style.display = 'none'; </script> </head> <body> <div id="box"> <ul> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> <li>あああああああ</li> </ul> </div> </body> </html>
補足
IE対応なので、jsで実装したいのですが・・・