• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：リスト間の隙間を無くす方法 jquery）

リスト間の隙間を無くす方法 jquery

このQ&Aのポイント
  • jquery記述にてリスト間の隙間を無くす方法を探しています。
  • 改行してあるリスト項目を<ul><li>aaa</li><li>aaa</li><li>aaa</li></ul>のように隙間なく並べたいです。
  • <li>aaa</li><!-- --><li>aaa</li>のようにコメントアウトを入れようとしましたが、うまくいきませんでした。他にもっと良い方法があれば教えてください。

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

  • ベストアンサー
回答No.6

すこしはコードをながめるべき。 それでもわからなければ、あらたにしつもんすべき。 20ぽいんとじゃ～、わりがあわぬ。 三項演算子をみつけ、値を逆にする。 もしくは、その評価値を反転させる。 もしくは、スタイルシートで、標準の色とそうでない色を追加する

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

その他の回答 (5)

回答No.5

<!DOCTYPE html> <title></title> <meta charset="UTF-8"> <style> .that { color: red; } </style> <body> <p> <button>100</button> <button>200</button> <button>300</button> </p> <div id="list"> <ul> <li>100</li><li>200</li> </ul> <ul> <li>300</li><li>200</li> </ul> </div> <script> /*@cc_on @set @mode = (@_jscript_version < 9); @if(@mode) if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)}; if(!Array.prototype.some)Array.prototype.some=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)if(a in this&&b.call(c,this[a],a,this))return true;return false}; @end@*/ function trim (a) {return a?a.replace(/^\s+|\s+$/g,''):''} function getText (a) {return trim(a./*@if(@mode)innerText@else@*/textContent/*@end@*/)} function hasText (a) {return this==getText(a)} document./*@if(@mode)attachEvent('on'+@else@*/addEventListener (/*@end@*/ 'click', 　function handler (event) { 　　var A = Array.prototype, e = event./*@if(@mode)srcElement@else@*/target/*@end@*/; 　　if ('BUTTON' == e.tagName) 　　　A.forEach.call ( 　　　　e.ownerDocument.getElementById ('list').getElementsByTagName ('UL'), 　　　　function (ul) { ul.className = A.some.call (ul.childNodes, hasText, this) ? 'that': ''}, 　　　　getText(e)); 　}, false); </script> ie は、やっぱり めんどう。ie9で確認 -- > $('#list>ul').removeClass('that') $('#list>ul') は、複数？

eeiina
質問者

お礼

ありがとうございます。ieでばっちり動きました。 >$('#list>ul') は、複数？ #listは1つで、<ul>は複数です。 恐縮ですが、styleの適用を逆にすることは可能でしょうか？ 100をクリックしたら<li>100</li>を含まない<ul>たちにstyleを適用する形です。 また、buttonが <div id="btn"><button></button></div>このようにidの中にあった場合の指定はどのようにすればよいでしょうか、 if ('BUTTON' == e.tagName)この部分を変えるのでしょうか・・？

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

jQuery なんて使わなくてもできる。 動かない原因は、 var uls = document.getElementsByTagName ('ul'); この行が実行されるとき、まだ ul 要素が読み込まれて無いのじゃないのかな？ つまりスクリプトが、実行されるタイミングが悪いだけじゃないの？ 例えば、<head>要素の中にスクリプトがあっても、実行した時に ul 要素が読み込まれていないとか。 onload を使う。もしくは <script> ＃３で示したコード </script> </body> のように、</body> の直前に置く。 では、どうでしょう？

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

function B (ul) { 　for (var e, n = ul.firstChild; e = n; ) { 　　n = n.nextSibling; 　　if (e.nodeType == 3) 　　　ul.removeChild (e); 　} } var uls = document.getElementsByTagName ('ul'); for (var i = 0, ul; ul = uls[i++]; ) { 　B (ul); } こんなふうに？

eeiina
質問者

補足

ありがとうございます。ieで動作しないため、隙間が無くなっていないようなのですが、 初歩的なことですみません。以下のような入れ方でいいのでしょうか？ <script> $(function(){ $(function B (ul) { 　for (var e, n = ul.firstChild; e = n; ) { 　　n = n.nextSibling; 　　if (e.nodeType == 3) 　　　ul.removeChild (e); 　} } var uls = document.getElementsByTagName ('ul'); for (var i = 0, ul; ul = uls[i++]; ) { 　B (ul); } }); }); </script>

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

なんでもかんでも jQuery ？ function B (ul) { 　for (var e, n = ul.firstChild; e = n; ) { 　　n = n.nextSibling; 　　if (e.nodeType == 3) 　　　ul.removeChild (e); 　} }

eeiina
質問者

お礼

ご回答ありがとうございました。 なんでもって訳ではないんですが、まとめて出来る方法があればと思いまして…。 自分の記述の仕方が悪いと思いますが、教えていただいたコードで 意図の通り動かすことができていません。 動くようにテストしていきたいと思います。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 そうすることによって何を達成しようとしていますでしょうか。 目的がわからなかったので補足して頂ければと思います。

eeiina
質問者

補足

お世話になります。 元の目的は http://questionbox.jp.msn.com/qa7697178.html になります。 ご回答者様のお力で動きはできたのですが実装する際にhtmlの所で多少違う部分がありIEにて動かなく、原因と思われる問題の部分を抜粋してご質問させていただきました。 IEの場合、 <li>aaa</li><li>bbb</li>→この並びだと動きます <li>aaa</li> <li>bbb</li>→改行してあると動きませんでした 当方の実装させたいhtmlのリスト項目は全て改行してあり、<UL>・<LI>自体の数もたくさんあるため、まとめて隙間を埋めることはできないかと思いました。 説明不足失礼しました、よろしくお願いいたします。

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

関連するQ&A

  • jQueryでリストを3項目ずつにしたい。

    いつもこちらでお世話になっています。 またjQuery関連で質問をさせて下さい。 下のようなリスト項目をfloatさせています。 <ul class="box"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> レイアウトをcssで設定して 1行あたり3項目ずつの横並びにしたいと考えています。 ４項目以上の場合は、 2行目に、あらたに3項目分のリストを表示したいです。 ※liの個数は動的に変化します。 ※cssの方は特に問題なく出来ています。 例えば上記の例のように4項目あった場合に 2行目が1項目分しかないため、2項目分の余白ができるので その足りない分のliの個数を算出し、liを追加したいと考えています。 $('ul.box').append('<li />');　を使うのだと思うのですが どのようにappendするliの個数を、算出したらよいのでしょうか？ 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。

  • 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>

  • WinIE5でリストに隙間ができる

    WinIE5で下記のCSSを実行すると、なぜか文字の下に隙間が出来てしまいます。 WinIE5.5、WinIE6等では隙間は出来ません。 なにかうまく解決する方法はありませんでしょうか。 よろしくお願いします。 ------------------------------ #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { margin: 0; padding: 0; background: #e0861e; width: 100px; } <div id="nav"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </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="column１"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？ …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • リストが途中で切れていても背景色は表示されるようにしたい

    どうしても分らないので、教えてください。 リスト<li>を横並びにして、項目リンクを作成しているのですが、後々増えることを想定しています。 <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> という状態で、Menu3部分で改行されたようにすると、背景色がMenu5のところで途切れてしまいます。 （※ベースのwidthを300px、liのwidthを100px、といった感じで改行させたように見せています） <li>Menu6</li>を記述しなくても、背景色が表示されるようにしたいのですが、 <div> <ul> <li></li> ... </ul> </div> 上記のように<div>で括り、背景色を指定しても、うまくできません。 括った<div>にheigthをピクセル指定すれば表示されますが、それだと、項目が増えるたびに変更しなければなりません。 また、<li>タグにはlist-style-imageも指定しているので、 <li></li> のような空タグを入れておくのもできません。 どなたか、良い方法がありましたら、教えていただけませんでしょうか？ よろしくお願いいたします。

  • 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
  • ｊQueryの要素選択について

    例えば、 <ul id="list"> <li style="width: 100px;">リスト１</li> <li style="width: 200px;">リスト２</li> <li style="width: 300px;">リスト３</li> </ul> というHTMLの、liのwidthの合計をjQueryを使って求めるには、どうすれば良いでしょうか？ for( prop in $("ul#list li") ) { width_sum += prop.width(); } こんな感じだと思っていたのですが・・・うまくいきません。 Javascript初心者です。 「その前に○○を勉強した方がいいよ」などのアドバイスはお控えいただいて、純粋に解答のみを教えていただければ幸いです。 よろしくお願いいたします。

  • 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でプルダウンメニュー

    jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>

  • FC2 ブログで動作しない jQuery

    http://www.texotela.co.uk/code/jquery/newsticker/ を参考にページを作成して、ウェブに公開したら、思い通りに動作する様になったのですが、いざ、使用目的先の FC2 ブログに移行すると、どうやっても正常に動作しません。一体何が原因なのでしょうか？FC2 ブログ以外の FTP サーバーにアップロードしたのは正常にフェードアウトして、テキストが変わるのですが、FC2 ブログの場合は、リストのマークが表示され、フェードしないで、項目が全て表示されてしまいます。 ヘッダにソースを入れ <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_min.js"></script> <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_newsticker.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#news").newsTicker(); parseSamples(); } ); </script> CSS をスタイルシートに入れ ボディに <ul id="news"> <li>項目1</li> <li><項目2</li></ul> を入れてるのですが、フェードしたり、リストのマークが消えなかったり、項目の一覧が表示されて、望み通りの結果が出ません。FC2 ブログでは利用出来ないのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する