jQueryでクラスが変更されたら、その子要素のクラスを変更したい

Question

fooというクラスを持つdiv要素が複数あり、このうち一つの要素をクリックすると使用しているCSSフレームワークの処理によって、クリックした要素にだけactiveクラスが追加されます。

<div class="foo">〜</div>
<div class="foo">〜</div>
<div class="foo">〜</div>

 一番上をクリックすると 、、、

<div class="foo active">〜</div>
<div class="foo">〜</div>
<div class="foo">〜</div>

このアクションによってactiveが追加されたfooの子要素pにクラス名を追加したいのですが、

if ($('.foo').hasClass('active')) {
    $('.foo p').addClass('hoge');
  }

としても機能しませんでした。
（ちなみに、if (1 == 1) とすれば動くので、activeを判定する部分がおかしいのだと思います）

どうすれば希望通りの処理を実行できるでしょうか？ご教授お願いします。

Answer 1

$(".foo").on("click", function(e){
    if($(this).hasClass("active")){
        $(this).children("p").addClass("hoge");
    }
});

おそらくクリック等の何等かのイベントをとる必要があると思われるので、上記でどうでしょうか。
クラスが変化するよりも早くイベントが走ってしまうと上記でもダメですが・・・

Comments

[YashaWedyue]

クリックした要素の子にクラスを追加するので、
if文はなくてもいいような気がしますね。

[iniesta]

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

ご教授いただいた通りにやってみたところ、1回目のクリックではクラスが追加されず、2回クリックするとクラスが追加されました。
おそらく、クラスが変化するよりも早くイベントが走ってしまっているのだと思われます。

他に考えられる方法はないでしょうか？

[orange0190]

YuyaKoshimizuさんの言う通りかもしれません。
なので、以下のようにしてはどうでしょう。
$(".foo").on("click", function(e){
$(this).children("p").toggleClass("hoge");
});
少し改造して、クリックする度にクラスを付けたり、消したりするようにしました。

[iniesta]

ShunsukeIzuiさんの最新の回答で無事できました！！本当に助かりました！！！

お二人ともご回答ありがとうございました(^ ^)