jQueryでリスト項目の表示・非表示を切りかえる

このQ&Aのポイント
  • jQueryを使用してリスト項目の表示と非表示を切り替える方法について教えてください。
  • HTML内のリスト項目を、flagの値に応じて表示または非表示にする方法を教えてください。
  • 以下のjQueryのコードでリスト項目の表示・非表示を切り替えようとしていますが、うまくいきません。正しい書き方は何ですか?
回答を見る
  • ベストアンサー

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
  • 回答数2
  • ありがとう数3

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

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

追加 まず、<script></script> の中身をみないと判断つきませんねぇ。 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){  //何もしない }; が適切なタイミングで実行されていないのが原因のような気がします。

mc0816
質問者

お礼

原因が分かりました~ xmlの読み込みにやっぱり問題がありました。 xmlの読み込みはOKと思いきや、ダメでした。。。 仮で読み込ませた場合は、 書いてくださったスクリプトで 大丈夫そうです。 読みこみの別の問題が発生してしまいましたが ちょっと自分で考えてみます。 分からない場合は、また別途、お世話になるかと思いますが 今後ともどうぞご指導くださいませ。 この問題に関しては大丈夫そうなので 取り急ぎ御礼まで。 助かりました。 ありがとうございました。

その他の回答 (1)

回答No.1

if(flag==0){  $(".test li:eq(2)").hide(); }else if(flag==1){  $(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(flag==2){  //何もしない }; なんで、flagとsettlementflagなの?

mc0816
質問者

補足

すみません… flagとsettlementflagを混在させてしまいました。 これは単純ミスです。 基本的には書いていただいたとおりflagでやってみたのですが、 なぜかできないんです。 単純な質問なのですが、 質問1 : show()って書く必要はないんですか? 質問2 : すべての<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でリストを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の個数を、算出したらよいのでしょうか? 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。

  • jQueryのclickについて

    現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・ 『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか? 折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・ 宜しくお願いします。

  • jQuery 1つの要素を複数箇所に表示したい

    いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか? ▼HTML ------------------- <div class="hoge"></div> ~別要素(省略)~ <div class="info">  <ul>   <li>項目1</li>   <li>項目2</li>  </ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • jQueryで6行表示のループ

    大雑把な質問なのですが、自分でもわかっているのですが、 もっと簡単なやり方がないものかと色々とやっていたのですが、 ありませんでしょうか? $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });

  • JavaScriptのjQueryのサンプルに機能を追加したいです!

    当方jQuery初心者です。 jQueryのサンプル「Dropline Menu 7」を使っています。 現在地となるcurrentがデフォ表示で赤字にて表示されていると思います。 その他メニューをマウスオーバーすると他メニューのサブメニューが下に表示されていきます。 しかし、マウスアウトすると直ぐデフォ表示に戻ってしまいます。 そこにマウスオーバー時に現われていたサブメニューがマウスアウトしてもすぐ消えない、2~3秒程の時間表示されるようなものを設け、 その設定した時間内にマウスオーバーするとそのまま表示を継続、というような機能をこのスクリプトに追加したいです。 http://jsajax.com/jQueryDroplineMenuArticle1167.aspx いろいろと調べてみたのですがいい方法が見つかりません。 使われている JScript.js の中身はこのようになっていました。 /* ====================================================== This copyright notice must be untouched at all times. Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved. ========================================================= */ $(function() { $("#dropline li.current").children("ul").css("left", "0px").show(); $("#dropline li.current").children(":first-child").css("color", "#c00") $("#dropline li").hover(function() { if (this.className.indexOf("current") == -1) { getCurrent = $(this).parent().children("li.current:eq(0)"); if (this.className.indexOf("top") != -1) { $(this).children("a:eq(0)").css("color", "#069"); } else { $(this).children("a:eq(0)").css("color", "#000"); } if (getCurrent = 1) { $(this).parent().children("li.current:eq(0)").children("ul").hide(); ; } $(this).children("ul:eq(0)").css("left", "0px").show(); } }, function() { if (this.className.indexOf("current") == -1) { getCurrent = $(this).parent().children("li.current:eq(0)"); if (this.className.indexOf("top") != -1) { $(this).children("a:eq(0)").css("color", "#000"); } else { $(this).children("a:eq(0)").css("color", "#666"); } if (getCurrent = 1) { $(this).parent().children("li.current:eq(0)").children("ul").show(); ; } $(this).children("ul:eq(0)").css("left", "-99999px").hide(); } }); }); イベントのhover(over, out)で、out部のfunction() {~} の処理内にて変更・追加すればよいのでしょうか? どなたかご教授いただけますでしょうか、お願いします!

  • jQueryで記事を6列表示にしたいのです。

    jQueryで記事を6列表示にしたいのです。 jQueryで6列表示をしたいと思って試行錯誤をしていたのですが、 全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。 各カテゴリごとに表示をするようになっているのですが、 オールだけ全て表示になります。 5つ残して表示させればいいのですが、各カテゴリが 消えてしまうので、どうしてもオールは6行表示させたいと思っています。 どなたか助けていただけませんでしょうか? jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>

  • 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
  • jqueryのvalue習得によるhtml書き換え

    jqueryにてvalueの値を取得し、同じ値を持つ要素を消去した後、別のものに書き換えたいと思います。 目的: 「value=4」を持つ要素をクリックしたらその要素だけではなく、属性「value=4」を持つ他の要素を入れ替えたい。 HTMLソース ------------------------------------------------ <ul> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=2>test</a></li> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=3>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=5>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=5>test</a></li> <li><a href="" class="counter" value=5>test</a></li> </ul> ------------------------------------------------ javascriptソース <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ $(".counter").click(function () { siteID =$(this).attr("value"); $(".counter([value=siteID])").css("background-color","#000"); }); }); </script> 何とかvalueの値を取得することは出来たのですが、その後の動作がわかりません。 上記の方法で解決するかと思えたのですが、ここから先が進みませんでした。 試しに背景色のみを同じ値を持つ要素を書き換えようと思っております。 どちらかご教授頂ければ幸いに御座います。

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

専門家に質問してみよう