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");
});
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") }
);
みたいな感じでいけると思いますが?(全角空白→半角に)
この回答への補足
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>
not()が、子孫要素も含めて属しているものを除外すると思っていたのですが、
そうではなくて“指定したものだけ”除外されるんですね。
普段のセレクターが子孫要素も含めて絞り込まれていくので、
notも同様だと思っていました。
コードありがとうございます。
参考にさせて頂きます。
No.1
- 回答日時:
・数カ所でclass属性にクオーテーションマーク忘れがあります。
・<ul>の直下に<div>が入っているところがあります。
HTMLなら、クォーテーションマーク忘れ程度なら問題はないと思いますが、
(ただしスクリプトとしての動作保証がありません)
XHTMLですので、これだけのミスでも大きく影響するかもしれません。
他の所は見てません。
HTMLの修正で直れば良し、直らなければ他に原因があるかもしれません。
この回答への補足
いろいろソースをいじってみたところ、
上位にDIVが一つでもあると駄目なようです。
<body>
<!-- これはOK -->
<div class=_bigbox>
<div class=_e>test</div>
<div>
<!-- これはNG -->
<div>
<div class=_bigbox>
<div class=_e>test</div>
<div>
<div>
最上位タグのみと言う制限はないと思うのですが…。
回答ありがとうございます。
問題点を修正してみました。
http://www.wp-start.com/jquery_test/test2.html
しかし、状況は変わりません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- 英語 英語 could notについて 3 2023/01/01 23:48
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
jQueryの :not() .not() が有効...
-
idを使わずにonclickで自身の要...
-
jqueryuiのdialog
-
jQueryでzipを解凍読み込みする...
-
JavaScriptの日付の比較
-
関数名をテキストから読み込む...
-
全角英数字を半角英数字に置換する
-
スムーズに動く アニメーション...
-
(function(){})()の意味
-
JavaScript 、function、return
-
jQueryの"return false"の役割...
-
文字を一文字ずつ表示
-
window.openでタイトル名の指定
-
C#テキストボックスの文字を配...
-
C#OpenCv V4にのエラーに関する...
-
javascript 変数名の連結をしたい
-
Excel VBA の ChangeFileAccess
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
要素名がスペースを含む場合のj...
-
javascript(jQuery)でセル内...
-
ajax反映後のjqueryが動かない
-
jQueryの :not() .not() が有効...
-
getElementByIdを使用したグロ...
-
コードをスマートにさせたい。
-
クリックすると上に開くアコー...
-
jQueryの"return false"の役割...
-
jQueryが読み込めない
-
jqueryの変数を関数の外に出す方法
-
個別では動く、javascriptのエラー
-
一つのアクションで関数を二つ...
-
R言語
-
jQuery|:not(:animated)
-
XMLHttpRequestでキャッシュを...
-
スムーズに動く アニメーション...
おすすめ情報