jQueryでリストを3項目ずつにしたい
- jQueryを使用して、リスト項目を3つずつ横並びにしたいと考えています。
- 動的に変化するリストの項目数に応じて、余白を埋めるために追加のリスト項目を算出したいです。
- ul要素のクラス名が「box」であり、floatを使用してリスト項目を配置しています。
- ベストアンサー
jQueryでリストを3項目ずつにしたい。
いつもこちらでお世話になっています。 またjQuery関連で質問をさせて下さい。 下のようなリスト項目をfloatさせています。 <ul class="box"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> レイアウトをcssで設定して 1行あたり3項目ずつの横並びにしたいと考えています。 4項目以上の場合は、 2行目に、あらたに3項目分のリストを表示したいです。 ※liの個数は動的に変化します。 ※cssの方は特に問題なく出来ています。 例えば上記の例のように4項目あった場合に 2行目が1項目分しかないため、2項目分の余白ができるので その足りない分のliの個数を算出し、liを追加したいと考えています。 $('ul.box').append('<li />'); を使うのだと思うのですが どのようにappendするliの個数を、算出したらよいのでしょうか? 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいかがでしょうか。 if($('ul.box > li').size() % 3 != 0){ // li要素が3で割り切れなかったときだけ、 $.each(new Array(3 - $('ul.box > li').size() % 3),function(i){ // 3から余りを引いた分をループして、 $('ul.box').append('<li />'); // 空のli要素を追加する }); }
関連するQ&A
- 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
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]: <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]: <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]: <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- リスト間の隙間を無くす方法 jquery
jquery記述にてリスト間の隙間を無くす方法を探しています。 改行してあるリスト項目を <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> ↓ <ul> <li>aaa</li><li>aaa</li><li>aaa</li> </ul> このように隙間なく並べた場合と同じ状態にしたいのですが、どのような方法があるのでしょうか。 <li>aaa</li><!-- --><li>aaa</li> このようにコメントアウト入れようと思いましたがうまく入りませんでした。 もっと良い方法などあれば教えて頂きたく質問させていただきました。 記述など具体的にあれば大変助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryでリスト項目の表示・非表示を切りかえる
jQueryに詳しい方教えてください。 下記のようなHTMLがあって、 jQueryを使って<li>要素の表示/非表示を切り替えたいのです。 ---------------- HTMLスクリプト <ul class="test"> <li>項目1</li> <li>項目1</li> <li>項目1</li> </ul> 切り替えるタイミングはxmlのデータ内にflagを立てています。 flagの値は取得できました。(確認済み) 仕様としては、flagの値が 0の時は→<li>要素の1つ目と2つ目を表示させる。 1の時は→<li>要素の3つ目のみを表示させる。 2の時は→<li>要素のすべてを表示させる。 ということをしたいのです。 ですが、なぜかうまくいきません。 以下のように書きました。 if(flag==0){ $(".test li:eq(2)").hide(); }else if(settlementflag==1){ $(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(settlementflag==2){ //何もしない }; そもそもこうゆう書き方で合っているのしょうか? jQueryを勉強したてで、恥ずかしいばかりですが、 ご教授のほど宜しくお願いいたします。
- ベストアンサー
- AJAX
- リストを横並びにするとマーカーが消える(IE)
cssデザインをしているのですが、<ul><li></li></ul>タグで箇条書きを使っています。これをfloatで横並びにさせたのですが、IEで見たとき横に表示されるべきマーカーが消えてしまいます。これの対処法を教えていただけませんでしょうか?画像で置き換え以外の方法でお願いします。
- 締切済み
- HTML
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示(縦に伸びていきます)し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- リストの一つの項目のみの右側に画像を表示させたい
リストの一つ項目のみの右側に画像を表示させたいのですが、どうすれば良いのでしょうか? 具体的には自分のサイトの既存のリストに新しい項目を付け加えた時にその後ろに"new"を表す画像を表示させたいのですが。(下記■の部分に) ・りんご ・バナナ ・みかん ・メロン■ 出来ればCSSで設定したいです。 htmlに直接画像を貼り付けても良いのですが、そうすると画像を貼り付けた行の前後だけline-heightが狂って(狭くなる)しまいます。これが解決できればhtml内への記述でも構いません。 **html** <ul> <li><a href="a.html">りんご</a></li> <li><a href="b.html">バナナ</a></li> <li><a href="c.html">みかん</a></li> <li><a href="d.html">メロン</a></li> </ul> ******************* **CSS** ul{ line-height: 170%; margin:0px; padding:0px 0px 30px 20px; } ****************** liに対して背景画像とその位置をpaddingで設定してやるのかなと考えましたが上手くいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか? <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- プレビュー画面でリストマークが消えない
いつもお世話になります。 DW CS3でナビゲーションバーを作成しようとしているのですが、CSSでlist-style:none;やlist-style-type:none;にしてもリストマークが消えてくれません。 さらにfloat:left;を使っても横並びになってくれません。 デザイン画面ではリストマークも消え横並びになっているになぜかプレビューで確認すると反映されていないのです。 HTMLおよびCSSは下記の通りです。 どなたか詳しい方、ご教授願います。 HTML <div id="nav"> <ul> <li class="nav01"><a href="#0"><img src="images/keybridge.gif" border="0" /></a></li> <li class="nav02"><a href="#n" class="style14">News</a></li> <li class="nav03"><a href="#s" class="style14">Schedule</a></li> <li class="nav04"><a href="#a" class="style14">Access</a></li> </ul> </div> CSS #nav { background:#FFFFFF } #nav ul{ width:100%; margin:0 auto; overflow:hidden; } #nav li { width:25%; float:left; list-style:none; } #nav a{ display:block; text-align:center; text-decoration:none; } #nav a:hover{ background:#CCCCCC }
- ベストアンサー
- CSS
- リストの高さを揃えたい
リスト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
お礼
kuzumiHKさん ありがとうございます! 教えていただいた通り、実装したら期待通りにできました! 剰余の使い方とか、 配列を組み込むeachメソッドとか、スゴイ参考になりました。 これからも勉強頑張ります。 本当にありがとうございました。