jQueryの:not() .not()が有効にならない

前へ 次へ
このQ&Aのポイント
  • 一部のクラスを除いて処理をしようと思っています。notを使いたいのですが、思うように動作してくれません。
  • マウスホバーとマウスクリックでクラス_e,_hでアクションを起こしますが、クラス_bigboxに入っている_e,_hは反応しないようにしたいです。
  • jQueryのnotを使用して問題を解決したいと考えています。
回答を見る
  • ベストアンサー

jQueryの :not() .not() が有効になってくれない

jQueryの :not() .not() が有効になってくれない 一部のクラスを除いて処理をしようと思っています。 notを使いたいのですが、思うように動作してくれません。 スクリプトの問題なのか、HTMLの問題なのか…。 原因究明にご協力お願いします。 http://www.wp-start.com/jquery_test/test2.html 詳しくはソースを見て頂きたいのですが… http://www.wp-start.com/jquery_test/function.js マウスホバーとマウスクリックで クラス _e,_h でアクションを起こします。 でも、クラス _bigbox に入っている _e,_h は無反応にしたいのです。 このソースは問題部分だけを抽出しています。 notの逆に個別に指定するのは極めて煩雑になってしまいます。 できればjQueryのnotで解決したいと考えています。 よろしくお願いします。 以下、ソースの一部です。 -------------------------------------------------- //_hクラス $("div:not(._bigbox) ._h").hover( function () {$(this).css("border","2px solid red") }, function () {$(this).css("border","none") } ); //_hクラス　 $("div").not("._bigbox").find("._h").click(function () { alert("click _h"); });

  • muuuuu
  • お礼率75% (101/133)

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

やりたいことの意味がよく把握できてませんが・・・ 想像では、セレクタのnotの意味を勘違いなさっているのではないかと思われます。 div:not(._bigbox)は、「div要素全体の中からクラス_bigboxを持つ要素だけを除いたもの」になります。 なので、<div class="_tabs">や<div id="sample1">は除かれていません。 「この部分は反応して欲しくない」のdivは（↑）の子要素でもあるので、当然対象に含まれてしまいます。 alert($("div").length + " / " + $("div:not(._bigbox)").length); とでもしてみれば、要素数は1個だけかわることをみればおわかりかと… もしも「tset」というところだけを対象にしたければ、親要素から順にきちんと捜索してゆくか、あるいは逆に「クラス_hの要素で、親要素にdiv._bigboxを持たないもの（あるいは単にクラス_bigboxを持たない）」のような感じで指定してあげればよいのでは？ 後者の例で ＞$("div:not(._bigbox) ._h").hover( ＞function () {$(this).css("border","2px solid red") }, ＞function () {$(this).css("border","none") } ＞); の部分を書き直してみれば、 $("._h").filter( function() { 　return !$(this).parents("._bigbox").length; }).hover( 　function () {$(this).css("border","2px solid red") }, 　function () {$(this).css("border","none") } ); みたいな感じでいけると思いますが？（全角空白→半角に）

muuuuu
質問者

お礼

not()が、子孫要素も含めて属しているものを除外すると思っていたのですが、 そうではなくて“指定したものだけ”除外されるんですね。 普段のセレクターが子孫要素も含めて絞り込まれていくので、 notも同様だと思っていました。 コードありがとうございます。 参考にさせて頂きます。

muuuuu
質問者

補足

notを理解しました。 セレクトされた要素から、除外するセレクター。 だから、除外したいものを完全に指定する必要があるんですね。 実験用のコードを作ってみました。 ※grp1配下にあるgrp3は影響を受けないようにしたい。 <script language="JavaScript"> <!-- $(document).ready(function(){ $("div:not(.grp1) .grp3").append(" 反応中[1]"); $("div:not(.grp1 .grp3) .grp3").append(" 反応中[2]"); $("div.grp3:not(.grp1 .grp3)").append(" 反応中[3]"); //OK $("div.grp3").not($(".grp1")).append(" 反応中[4]"); $("div.grp3").not($(".grp1 .grp3")).append(" 反応中[5]"); //OK }); // --> </script> <div class="grp1"> <div class="grp2"> grp1,2 </div></div> <div class="grp1"> <div class="grp3"> grp1,3 </div> </div> <div class="grp2"> <div class="grp3"> <p>grp2,3</p> </div></div> <div> <div class="grp1"> <div class="grp2"> <p>div + grp1,2</p> </div></div> <div class="grp1"> <div class="grp3"> div + grp1,3 </div> </div> <div class="grp2"> <div class="grp3"> div + grp2,3 </div></div> </div>

その他の回答 (1)

回答No.1

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.wp-start.com%2Fjquery_test%2Ftest2.html&charset=%28detect+automatically%29&doctype=Inline&group=0 ・数カ所でclass属性にクオーテーションマーク忘れがあります。 ・<ul>の直下に<div>が入っているところがあります。 HTMLなら、クォーテーションマーク忘れ程度なら問題はないと思いますが、 （ただしスクリプトとしての動作保証がありません） XHTMLですので、これだけのミスでも大きく影響するかもしれません。 他の所は見てません。 HTMLの修正で直れば良し、直らなければ他に原因があるかもしれません。

muuuuu
質問者

お礼

回答ありがとうございます。 問題点を修正してみました。 http://www.wp-start.com/jquery_test/test2.html しかし、状況は変わりません。

muuuuu
質問者

補足

いろいろソースをいじってみたところ、 上位にDIVが一つでもあると駄目なようです。 <body> <!-- これはOK --> <div class=_bigbox> <div class=_e>test</div> <div> <!-- これはNG --> <div> <div class=_bigbox> <div class=_e>test</div> <div> <div> 最上位タグのみと言う制限はないと思うのですが…。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jquery not()がきかない

    jqueryについて１点だけ教えて頂きたいことがございます。 今、下記のjqueryにてロールオーバー時のイベントを実行しています。 $('a:not(.current) img').each(function() { var target = $('a:not(.current) img') target.hover(function(){ $(this).stop().fadeTo(500,0.6); }, function() { $(this).stop().fadeTo(500, 1); }); }); それともう一つjqueryである一部分だけ違うロールオーバーにしたく、 全体にかかる上記のjqueryで、#photogalleryというID以外の(a:not(.current) img)にしたいのですが、 ('a:not(.current) img')を $('div').not('#photogallery').find('a:not(.current) img') このようにしてみたのですが、#photogalleryまで実行されてしまいます。 調べて見たのですがわからず、教えて頂ければ幸いです。 どうぞ宜しくお願い致します。

  • jQueryで特定id以外の下にある要素を削除したい

    HTMLの制御にjQueryを使用しています。 作業の流れで、#contents以外の要素に存在する特定のクラスを削除したいと思っています。 対象ソースをコンパクトに書くと <body> 　<div id="contents"> 　　<p class="test">moji</p> 　</div> 　<div id="etc"> 　　<p class="test">moji</p> 　</div> 　<div id="etc2"> 　<p class="test">moji</p> 　</div> </body> というもので、contents以外のetc,etc2にあるclass="test"をremoveしたいのです。 ※cotents以外はidがイロイロ変わるので、「contents以外」でやろうとしています。 jQueryのマニュアルを見ながら、次のようなコードを書きました。 jQuery("*").not("#contents").hasClass("test").removeClass("test"); しかし、実行がうまくいきません。 FireFoxのFireBugで動作を見てみると「functionがない」というメッセージなっています。 jQuery("*").not("#contents").each( function() { 　jQuery(this).hasClass("test").each( function() { 　　jQuery(this).removeClass("test"); 　}); }); でも同じ結果でした。 何か良い方法はないでしょうか。

  • 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"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。

  • jQueryで追加した要素がマウスホバーに反応しない

    jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>

  • 【jQuery】jQuery Masonry

    この度jQueryで壁にぶつかり、質問させて頂きます。 現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。 画面イメージとしては・・ Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。 【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。 参考サイト：http://goo.gl/QLQI7 実際のソース（抜粋）： <script> jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ jQuery('#container').masonry({ itemSelector: '.item', isAnimated:true }); }); }); </script> <script> jQuery(function () { jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ var cont = jQuery(this).next(); if(jQuery(cont).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery(cont).slideDown("fast"); jQuery("dt").removeClass("select"); jQuery(this).addClass("select"); } }).hover( function(){jQuery(this).addClass("over");} ),( function(){jQuery(this).removeClass("over");} ); }); </script> <div id="container"> ～ここから～ <div class="item"> <dl> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> <dt>タイトル3</dt> <dd>本文3</dd> </dl> </div> </div> ～ここまでがLoopで複数のデータが表示される～ なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

    JavaScript、CSS初心者のものです。 今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。 これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか？ お手数ですが、ご教示お願いします。 以下ソースを載せておきます。 ◆javascript◆ <script type="text/javascript"> $(function() { $("#simpleAccordion div").hide(); $("#simpleAccordion h2").each(function(i) { var elementVal = $(this).next("div"); $(this).click(function() { elementVal.toggle("fast"); }); }); }); </script> ◆HTML◆ <div id="simpleAccordion"> 　<h1>画像の箇所</h1> 　<h2><a href="#">クリックする箇所</a></h2> 　<div>クリックされると開く箇所</div> 　<h2><a href="#">クリックする箇所</a></h2> 　<div>クリックされると開く箇所</div> </div>

  • Jqueryのセレクタ範囲について

    お世話になります。 【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか？ $("#aaa").not(":input"）　としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。 反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。 何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input～）」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか？

    • ベストアンサー
    • PHP
  • jQueryのアコーディオンがIE6でちゃんと動いてくれない

    jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。

  • jQueryでCSSの背景画像を切り替えたい

    見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg

    • ベストアンサー
    • CSS
  • jQuery JavaScript

    初めての質問ですがよろしくお願いします。 とあるシステムをphp+jQueryで開発しています。 <div class="item1" id="item1">アイテム名</div> このdviがクリックされた時に、 $(document).ready(function() { $('div[class^="item"]').mouseover(function(ev) { $(this).css('cursor', 'pointer'); }).click(function(ev) { // **この部分** // }); }); クリックイベント内でクリックされたclassNameかid名を取得する （この場合は item1 を文字列として取得したい） にはどうしたらよいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する