- ベストアンサー
リスト間の隙間を無くす方法 jquery
- jquery記述にてリスト間の隙間を無くす方法を探しています。
- 改行してあるリスト項目を<ul><li>aaa</li><li>aaa</li><li>aaa</li></ul>のように隙間なく並べたいです。
- <li>aaa</li><!-- --><li>aaa</li>のようにコメントアウトを入れようとしましたが、うまくいきませんでした。他にもっと良い方法があれば教えてください。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
すこしはコードをながめるべき。 それでもわからなければ、あらたにしつもんすべき。 20ぽいんとじゃ～、わりがあわぬ。 三項演算子をみつけ、値を逆にする。 もしくは、その評価値を反転させる。 もしくは、スタイルシートで、標準の色とそうでない色を追加する
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
<!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') は、複数？
- babu_baboo
- ベストアンサー率51% (268/525)
jQuery なんて使わなくてもできる。 動かない原因は、 var uls = document.getElementsByTagName ('ul'); この行が実行されるとき、まだ ul 要素が読み込まれて無いのじゃないのかな？ つまりスクリプトが、実行されるタイミングが悪いだけじゃないの？ 例えば、<head>要素の中にスクリプトがあっても、実行した時に ul 要素が読み込まれていないとか。 onload を使う。もしくは <script> ＃３で示したコード </script> </body> のように、</body> の直前に置く。 では、どうでしょう？
- babu_baboo
- ベストアンサー率51% (268/525)
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); } こんなふうに？
補足
ありがとうございます。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>
- babu_baboo
- ベストアンサー率51% (268/525)
なんでもかんでも jQuery ？ function B (ul) { for (var e, n = ul.firstChild; e = n; ) { n = n.nextSibling; if (e.nodeType == 3) ul.removeChild (e); } }
お礼
ご回答ありがとうございました。 なんでもって訳ではないんですが、まとめて出来る方法があればと思いまして…。 自分の記述の仕方が悪いと思いますが、教えていただいたコードで 意図の通り動かすことができていません。 動くようにテストしていきたいと思います。ありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 そうすることによって何を達成しようとしていますでしょうか。 目的がわからなかったので補足して頂ければと思います。
補足
お世話になります。 元の目的は 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>自体の数もたくさんあるため、まとめて隙間を埋めることはできないかと思いました。 説明不足失礼しました、よろしくお願いいたします。
お礼
ありがとうございます。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)この部分を変えるのでしょうか・・？