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

解決済

質問者：muuuuu
質問日時：2009/09/20 22:42
回答数：4件

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

でも同じ結果でした。

何か良い方法はないでしょうか。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： imq
回答日時：2009/09/27 03:17

id="contents"の上層にもdivがあるからでしょうか？

その辺を考慮すると今までの考え方だとソースが少し煩雑になるので、
一度全てのclass="test"要素を取得してからid="contents"下の要素を
除外するのが良いかと思います。
jQuery('.test:not(#contents .test)').removeClass('test');

notメソッドを使う場合は、
jQuery('.test').not('#contents .test').removeClass('test');

余談ですが、
タグが固定できる場合は固定した方が実行速度が速いです。jQueryは特に。
jQuery('p.test').not('div#contents p.test').removeClass('test');

- 0
- 件

通報する

この回答へのお礼

できました！
ありがごうとざいます。

御返事が遅くなって申し訳ありません。
質問のソースが端折りすぎたためにお手数をおかけしました。

思い通りの動作です。
ずっと悩んでいたので、とても感激です。

ありがとうございました。

通報する

お礼日時：2009/09/29 22:11

No.3

回答者： imq
回答日時：2009/09/22 13:28

補足です。

回答2に書いたものはdiv階層にかかわらず除外するようにできています。
2つめのnotの中にある'#contents div'は、
id="contents"の子孫要素のdivという意味です。

この辺はjQueryというよりCSS Selectorの範疇です。

この回答への補足

昨晩戻ってきました。

早速試してみましたが、旨くいきませんでした。
旨く排除できずでいます。

試しに下記のようなコードで反応を見てみました。

jQuery('div').not('#contents').not('#contents div').find('.test').css("border","1px solid red");
jQuery('div').not('#contents').find('.test').css("border","1px solid red");
jQuery('div').not('#contents div').find('.test').css("border","1px solid red");

なぜか全てのクラスに反応してしまいます。
notの動作が思っているような動きではないのかな？
と思ったりもします。

補足日時：2009/09/26 14:00

通報する

- 0
- 件

通報する

この回答へのお礼

失礼しました。
目的id以下のdivの数だけ、排除処理が必要だと勘違いしていました。

今、モバイルからのアクセスなので、パソコンが使える環境になりましたら、改めてご報告いたします。

通報する

お礼日時：2009/09/24 00:27

No.2

回答者： imq
回答日時：2009/09/21 01:52

質問にあるコンパクト化したソースなら動くはずですが、

div#contentsの中に更にdivがワンクッション入っていると↓
<body>
　<div id="contents">
　　<div>
　　　<p class="test">moji</p>
　　</div>
　</div>
…
</body>
中間のdivは除外されないので、想定した動きにならないです。
中間のdivも除外するなら

$('div').not('#contents').not('#contents div').find('.test').removeClass('test');

としてみてください。

この回答への補足

ソースに一部誤りがありました。

jQuery("#contents").find(".test").addClass("escape");
jQuery(".test").each( function(){
　　if( jQuery(this).hasClass("escape") == false ){
　　　　jQuery(this).removeClass("test");
　　}
});
jQuery("#contents").find(".test").removeClass("escape");

補足日時：2009/09/22 01:27

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
#contentsの下のDIV階層は固定できないので、別な方法を考えました。

jQuery("#contents").find(".test").addClass("escape");
jQuery(".test").each( function(){
　　if( jQuery(this).hasClass("_escape") == false ){
　　　　jQuery(this).removeClass("test");
　　}
});
jQuery("#contents").find(".test").removeClass("escape");

あまり綺麗なやり方ではないかも知れません。
とりあえず目的は達することはできました。

もっとシンプルな方法をもう少し考えてみます。

通報する

お礼日時：2009/09/22 01:26

No.1

回答者： imq
回答日時：2009/09/21 00:13

hasClassの戻り値はjQueryオブジェクトではなく真偽値なので、

その後にメソッド・チェーンを続けることができません。
子孫要素を指定にはfindメソッドを使います。

あと、全要素指定の"*"はnotと組み合わせると想定した動きにならないので、
divを指定した方がいいです。

$('div').not('#contents').find('.test').removeClass('test');

jQueryの場合CSS3が使えるので、こういう記述もできます。

$('div:not(#contents) .test').removeClass('test');

ちなみに1つのjQueryオブジェクトにまとめられた全ての要素に対して
同じjQueryメソッドを適用する場合、わざわざeachメソッドを使う必要はないです。

この回答への補足

回答ありがとうございます。

hasClassは真偽値だったんですね。
確認不足でした。

コードを試してみましたが、残念ながら旨くいきませんでした。

$('div').not('#contents').find('.test').css("border","1px solid red");
$('div:not(#contents) ._test').css("border","1px solid red");

上記で試してみたところcontentsの下のクラスもborderが適用されます。

さらに

jQuery('div').not('#contents').css("border","1px solid green");

というののも試してみたのですが、これでも全ての要素のborderが適用されます。