複数の要素に対してjQueryを実行したい

Question

複数の要素に対して、それぞれ処理を実行する必要があり、jQueryプラグイン化すれば、同じ記述を何度もしなくてもソースを短くすることが可能ではないかと考え、やってみたのですがうまくいかずに困っています。
何か良いお知恵をお貸しいただけないかと思い投稿させていただきました。

---

やりたいこと

• .sec1の.btnがクリックされたら、そのなかのhogeがfadeoutする
• .hogeの高さは各secの.textを取得し、CSSに追加する

<div class='sec1'>
	<a class='bth'>クリック</a>
	<div class='hoge'></div>
	<div class='text'>テキストテキスト</div>
</div>
<div class='sec2'>
	<a class='bth'>クリック</a>
	<div class='hoge'></div>
	<div class='text'>テキストテキスト</div>
</div>

;(function($) {
  $.fn.hoge = function() {
    $content = $(this);
    function resizeCon () {
        var $w = $(window),
              h = $content.find('.text').outerHeight();
        $content.find('.hoge').css({
          width: w,
          height: h,
          }); 
    }
    resizeCon();
    $(window).resize(resizeCon);
    $content.find('.btn').click(function() {
        $content.find('.hoge').fadeOut(800);
    });
  }
})(jQuery);
$(function() {
  $('.sec1').hoge();
  $('.sec2').hoge();
});

---

現状
やりたいことの２つ目はうまくいっているようなのですが、１つ目がうまくいかない状況です。
.sec2の.btnをクリックすると.sec2のhogeがfadeoutするのですが、.sec1をクリックしても.sec2のhogeが消えていってしまいます。
処理が上書きされているのだろうか…とは思うのですが…。

誰かにソースを見てもらう機会もなく、プラグイン化もはじめてで、これでよいのかどうなのかわからないまま書きすすめてしまっています、もし何かアドバイスいただけるようでしたら是非お願いします。

Answer 1

.hogeの高さは各secの.textを取得し、CSSに追加する

が、いまいち何をしたいかわからないのですが、本題はsec1をクリックして
その中のhogeだけ対象にするという話のようなので以下でどうでしょうか？

$(function(){
  $('.sec1').on('click',function(){
    $(this).find('.hoge').fadeOut();
  });
});

Comments

[pitacora]

回答いただいてありがとうございました。
.sec1、.sec2、.sec3…（要素はいくつもあり、今後も増えていく）のです。
ですので、できれば、要素ごとにコードを書くのではない方法がないかなと考えています。私の理解力不足でしたら申し訳ありません。
.sec2に対しては以下のように指定していかなくてはならない…という解釈をしたのですが、間違っていたら申し訳ないです。
$(function(){
$('.sec1').on('click',function(){
$(this).find('.hoge').fadeOut();
});
$('.sec2').on('click',function(){
$(this).find('.hoge').fadeOut();
});
});

[yambejp]

$('.sec1,.sec2,.sec3').on('click',function(){
というように羅列すればいいですよ

[yambejp]

若しくは

<div class='sec1 sec_group'>
<a class='bth'>クリック</a>
<div class='hoge'></div>
<div class='text'>テキストテキスト</div>
</div>
<div class='sec2 sec_group'>
<a class='bth'>クリック</a>
<div class='hoge'></div>
<div class='text'>テキストテキスト</div>
</div>
のようにグルーピングをおこなって
$('.sec_group').on('click',function(){

とするとか・・・

[pitacora]

再び回答いただいてありがとうございました。
回答いただいたコードで試したところ、.secをクリックしたらそれぞれ期待どおりになりました。
大変申し訳ないのですが、回答いただいた点について見逃しており、修正いたしました。
.sec1をクリックするのではなく、.sec1のなかの.btnをクリックしたいのです…。

[yambejp]

ああ、ボタンですね
親に遡って子供をチェックするなら
$('.sec .bth').on('click',function(){
$(this).closest('.sec').find('.hoge').fadeOut();
});

自分と並列のタグをチェックしたいならこう
$('.sec .bth').on('click',function(){
$(this).siblings('.hoge').fadeOut();
});

クラス名がbthになっていますがbtnじゃなくて大丈夫でしょうか

[pitacora]

親に遡って子をチェックすることができるのですね…勉強不足でした。とても勉強になりました。ありがとうございました。
またクラス名についても失礼しました、焦っていて間違えてしまったようです、お恥ずかしいです……。