- ベストアンサー
jquery 3の倍数のliだけ色を変える
jqueryでcssの変更をしたいのですが、 <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> 例えば、こういうhtmlがあった場合、 3の倍数（3,6）のliだけcssを付け加えたいのですが、 どうしたらよいでしょうか。 また、3,6は例に出しただけで、 4の倍数や5の倍数に変更する場合もあるので、 そういう方法があれば、ご教授お願いたします。
- trfnc223
- お礼率63% (111/174)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IEをのぞけば <style> li:nth-child(3n+1){ color:red; } </style> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> でいけませんか？ IEはbehaviorで処理するとか・・・
関連するQ&A
- JQueryで、liタグの背景に色を付けたい。
JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>
- ベストアンサー
- JavaScript
- JQueryについて教えて下さい。
html部分は <ul> <li>テスト1です。</li> <li>テスト2です。</li> <li>テスト3です。</li> </ul> <div id="test">test</div> となっており、 スクリプト部分は、 $("ul li:not(:first)").css("display","none"); $("#test").click(function(){ if($("+li",this).css("display")=="none"){ $("li").slideUp("slow"); $("+li",this).slideDown("slow"); } }); としています。 やりたいことは、"test"をクリックしたら、 次の"li"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。
- ベストアンサー
- JavaScript
- jQueryで複数あるUL要素の最後のLI要素以外を処理したい
jQueryで複数あるUL要素の最後のLI要素以外を処理したい 現在、HTMLを <ul> <li>foo</li> <li>bar</li> <li>com</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>com</li>（※） </ul> 上記のように記述しています。 今回、jQueryを使い、2カ所あるUL要素の最後のLI要素以外を処理したいと思い、 $(function(){ $("ul li:not(:last)").css("～","～"); }); 以上のようにjQueryを記述したところ、1カ所目の最後のLI要素は無視されCSSが追加されてしまいました。 1カ所目・2カ所目とも同じように処理するにはどうしたら良いでしょうか？ ご指導・ご鞭撻のほど、よろしくお願いします。
- ベストアンサー
- AJAX
- cssだけで縦書き的にliを並べる
すみません、質問させてください。 <ul> <li>1</li> <li>2</li> … <li>10</li> </ul> を、 1 6 2 7 3 8 4 9 5 10 と、並べる方法はありますでしょうか？ ただし、liの数は1～10の間で変動し、 ulは常に親要素の中央に配置させたいです。 ※liのwidthを100pxとした場合、 liの数が5以下の場合はulもwidthが100pxで親に中央配置、 liが6以上の場合はulのwidthが200pxになって親に中央配置。 cssだけで実装できる方法があればご教授ください。
- ベストアンサー
- CSS
- 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の個数を、算出したらよいのでしょうか？ 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。
- ベストアンサー
- JavaScript
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- jQueryプラグインのメガドロップダウンメニュー
jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる） スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・？ 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。
- 締切済み
- JavaScript
- ＣＳＳでulとliを指定し横に並べたいです。
ulとliを使っても横に表示できる方法わかる方教えてください。 例 <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> </ul> 普通は ・あああ ・いいい ・ううう ・えええ となってしまいますがこんな感じで作りたいのですが。 ・あああ ・いいい ・ううう ・えええ みたいに横にしたのですがどうやってやればいいかわかりません（泣） たぶんＣＳＳで指定するのかと思ってますが、違うんでしたらそのやり方を教えてください。
- ベストアンサー
- HTML
- <li>内の<ul>を横に表示する方法
<li>内の<ul>を横に表示する方法がわからずに困っています。 例えば <ul> <li>野菜 <ul> <li>大根 <li>にんじん </ul> </li> <li>果物 <ul> <li>りんご <li>バナナ </ul> </li> </ul> これを以下のように表示させたいのです。 ・野菜 ・大根 ・にんじん ・くだもの ・りんご ・ばなな この場合、CSSはどのように記載すればいいのでしょうか。 ご存知の方、ご教授頂けると幸いです。
- ベストアンサー
- HTML
- <li>の正しい使い方について
<li>の使い方についてなんですが、 <ul> <li class= "a"></li> <li class= "b"></li> <li class= "c"></li> </ul> みたいに、異なったコンテンツ(文章や画像、図表など)も<ul>で一括りにして、cssで<li>単位の整形するのって使い方として間違ってますか? 異なったコンテンツごとに<ul>か<div>など使うべきなのでしょうか?
- ベストアンサー
- HTML
お礼
できました！！！ ありがとうございました！