jQueryのコードの疑問:セレクタの書き方について

このQ&Aのポイント
  • jQueryのコード内のセレクタの書き方について疑問があります。なぜ+(プラス)が2箇所必要なのでしょうか?また、エラーが発生する理由を教えてください。
  • jQueryのセレクタの書き方について疑問があります。なぜ+(プラス)が2箇所必要なのでしょうか?エラーが発生する理由も教えてください。
  • jQueryコードのセレクタの書き方について疑問があります。なぜ+(プラス)が2箇所必要なのでしょうか?エラーが出る理由も教えてください。
回答を見る
  • ベストアンサー

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")+")") ↑箇所につきまして、なぜ+(プラス)が2箇所必要なのですか? $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか? どうぞよろしくお願いいたします(>_<)

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

  • ベストアンサー
  • bx2
  • ベストアンサー率47% (97/206)
回答No.2

+(プラス)は文字列の結合を意味しています。 「$("ul.tab li a.selected").attr("href")」で取得した文字列の前後に、「ul.panel li:not(」と「)」を結合しています。 +(プラス)が無ければ、文法エラーです。 jQuery 以前に、JavaScript の基礎を勉強してください。

mabatakiki
質問者

お礼

文字列を結合しているのですね。 ご回答いただきました通り、JavaScript の基礎から勉強しようと思います; どうも有難うございます。

その他の回答 (1)

  • hue2011
  • ベストアンサー率38% (2800/7250)
回答No.1

あんまりな質問なので、頭冷やして下さい。 次の文章があります。 「ばかず」が大事だ。 =「場数」が大事だ。 これをこう書いたらどう読みますか 「ばかずがだいじだ 馬鹿、図が大事だ、と読めますね。 これと同じこと、あなた言っています。後の 」 はなぜいるのですか、と。 もし編集者がこの文をみたら、「かかりむすびをちゃんとしてください」というでしょう。 それがエラーです。

mabatakiki
質問者

お礼

ヒドい質問でお恥ずかしい限りです; いただいた例文で理解出来た気がします。 ご回答いただき有難うございます。

関連するQ&A

  • 【jQuery基本質問】+(プラス)の使い方(2)

    +(プラス)の使い方に関してルールを教えてほしいことがあります。 対象プログラムは、以下です。 $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() この("+$("ul.tab li a.selected").attr("href")+")")の中で、+を使う理由がわかりません。 文字結合だと思うのですが、+がないと、not("URL")のようにならないのでしょうか? +がなくてもnot("URL")は成立するように思うのですが、、、。 +の使い方、基本ルールについておしえてくださいませ。

  • jQuery tabs 開閉式タブについて

    jQuery tabsについて質問させてください。 知識不足です。。 やりたいこととしましては、複数タブメニューの開閉です。 メニュー1 クリックで⇒開く ⇒再度クリックで閉じる メニュー1開放時⇒メニュー2 クリック⇒メニュー2の内容に切り替わる⇒メニュー2再度クリックで閉じるといった内容です。 開閉だけなら collapsible: true で解決ですが、slideToggle のような効果も付けたい。 単一のメニューの場合は slideToggle で一発ですが、複数になったらうまくいかない???? メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。 色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず どなたかjQueryマスターの方ご教授いただけますと幸いです。 説明下手ですいません。 何卒よろしくお願いいたします。 ※以下のスクリプトにこだわりはございません。 こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。 javascript ================ <script type="text/javascript"> $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected") $(this).addClass("selected") $("ul.panel li").slideUp("fast") $($(this).attr("href")).slideDown("fast") return false }); }) </script> ///////HTML////// <body> <ul class="tab"> <li><a href="#tabs-1">メニュー1</a></li> <li><a href="#tabs-2">メニュー2</a></li> <li><a href="#tabs-3">メニュー3</a></li> </ul> <ul class="panel"> <li id="tabs-1"></li> <li id="tabs-2"></li> <li id="tabs-3"></li> </ul> </body>

  • Jquery タブで、4つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません! http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ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> まずこのままだ4つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?

  • 前後の「+」の意味は?

    タブパネルを作成する以下のコードで分からない個所があります。 実際のページは→(http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/04/v2/sample2.html) $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("ul.panel li").hide(); $($(this).attr("href")).show(); return false; }); }); 分からないのは2行目の ("+$("ul.tab li a.selected").attr("href")+") です。 +(プラス)が前後に付いていますが、これがどういう意味なのか分かりません・・・ どうかご指南お願いいたします!

    • ベストアンサー
    • AJAX
  • jQueryを使用したタブの改造

    jQueryの知識が殆どないので教えてください。 以下のページで公開されているタブを改造して利用したいと考えています。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ ▼スクリプト部分 $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); ▼HTML部分 <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div> タブをクリックして切り替えるというシンプルなスクリプトなのですが、 1、クリックではなくマウスオーバーでタブを切り替え。 2、アクティブなタブを判別するための要素(?)を「href」ではなく「name」に変更したいと考えています。 自分なりに調べて .click(function() ~の部分を .hover(function() に、 attr("href")の部分をattr("name")(+HTMLのhref部分も変更)に 変更することでほぼ理想通りの動作をするようになりました。 ただ、このコードの動作で少し問題が発生しています 1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。 2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。

  • 画像を使用したタブを複数設置

    下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01~03、 a.selectedをa.selected01~03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ(IE対策)*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })

  • jQueryタブメニュー内へのリンク方法。

    javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内(tab1~tab3)へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。

  • jQueryのフェードイン・アウト効果について

    いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。

  • jQueryタブメニュー内、パネル間のリンク方法。

    javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 (下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){  $(".area").hide();  var tabs = $(".tab01 li");  tabs.click(function(){   var i = tabs.removeClass("active").index(this);   tabs.eq(i).addClass("active");   $(".content .area").hide().eq(i).fadeIn(400);   return false;  });  var hash = window.location.hash.match(/#tab(\d+)/);  hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0;  tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。

  • タブメニューを上下に設置

    下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。 スクリプトをどのように すればいいかお分かりの方がおられましたら ご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div>       <ul class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。

専門家に質問してみよう