jqueryを使ってクラスを一部追加したい

Question

下のjqueryを使ってhtmlのpタグにfuwatというクラスを追加しました。
しかし「mainVisual p」だけfuwatというクラスを追加したくないのですがどうすればmainVisual pにクラスを追加されないでしょうか。
よろしくお願いします。

$(console.log).ready(function(){
$("p").addClass("fuwat");
});

//文字をふわっと表示させる
$(document).ready(function(){
$('.fuwat').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('.fuwat').each(function(){
var objectPosition = $(this).offset().top;
if(topWindow > objectPosition - windowHeight + 200){
$(this).addClass("fuwatAnime");
}
});
});
});

Comments

[m.ts10806]

ソースコードはマークダウンのcode機能を利用してください

Answer 1

こんにちは。

$("p") の後に .not() を使って、除外対象を指定すればよいと思います。

ご質問にmainVisual　がクラスなのか id なのか書かれていなかったので、以下、各々に対しての回答です。

(1) mainVisual がクラスの場合

$("p").not(".mainVisual p").addClass("fuwat");

• **上記のサンプル： ** https://jsfiddle.net/jun68ykt/3kbfuh90/1/

(2) mainVisual が id の場合

$("p").not("#mainVisual p").addClass("fuwat");

• **上記のサンプル： ** https://jsfiddle.net/jun68ykt/kd6h83cu/1/

　　　

サンプルでは、 CSSで.fuwat の背景色を灰色(#AAA)にしていますが、 notを入れることにより、 .mainVisualまたは#mainVisual の中にある pにはクラスfuwatが追加されていないことを確認できると思います。

以上参考になれば幸いです。

Answer 2

「mainVisual p」の定義次第。
mainVisualの中のpなのか、mainVisual属性のついたpなのか
両方ともヒットさせるならこう（mainVisualはクラスと仮定する）

$(function(){
  $('p').filter(function(){return $(this).closest('.mainVisual').length==0;}).addClass('fuwat');
});

<p>p1</p>
<p class="mainVisual">p2</p>
<div class="mainVisual"><p>p3</p></div>