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

解決済

質問者：muuuuu
質問日時：2010/09/21 01:45
回答数：2件

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");
});

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2010/09/21 23:07

やりたいことの意味がよく把握できてませんが・・・

想像では、セレクタの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">

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

補足日時：2010/09/22 04:20

通報する

- 0
- 件

通報する

この回答へのお礼

not()が、子孫要素も含めて属しているものを除外すると思っていたのですが、
そうではなくて“指定したものだけ”除外されるんですね。

普段のセレクターが子孫要素も含めて絞り込まれていくので、
notも同様だと思っていました。

コードありがとうございます。
参考にさせて頂きます。

通報する

お礼日時：2010/09/22 03:57

No.1

回答者： taloo
回答日時：2010/09/21 03:56

http://validator.w3.org/check?uri=http%3A%2F%2Fw …

・数カ所でclass属性にクオーテーションマーク忘れがあります。
・<ul>の直下に<div>が入っているところがあります。

HTMLなら、クォーテーションマーク忘れ程度なら問題はないと思いますが、
（ただしスクリプトとしての動作保証がありません）
XHTMLですので、これだけのミスでも大きく影響するかもしれません。

他の所は見てません。
HTMLの修正で直れば良し、直らなければ他に原因があるかもしれません。

この回答への補足

いろいろソースをいじってみたところ、

上位にDIVが一つでもあると駄目なようです。
<body>

<div class=_bigbox>
<div class=_e>test</div>
<div>


<div>
<div class=_bigbox>
<div class=_e>test</div>
<div>
<div>

最上位タグのみと言う制限はないと思うのですが…。