【jQuery】１つのコードで全ての要素を個別に操作したい！

Question

（初歩的なミスをしている可能性が高いのでご容赦ください（汗））

近日、長い間手を付けていなかったjQueryを勉強するために

「とあるテキストをホバーすると、その下にボックスが表示される」

という基本的なプログラムを書いてみたのですが、早速壁にぶち当たってしまいました（泣）

それらを複数設置した場合に於いて、同じclassを使用しているため１つのテキストをホバーするだけで全てのボックスが表示（当たり前ですが）されてしまいます。
無論、「個別に指定する」という手があるということは存じておりますが、そのプログラムを設置しなくてはならない回数がかなり多く、個別に書いけばjQueryがとてつもなく膨大になってしまうので、どうにかしてjQueryを１つの共通のものにできないか、と、悩んでおります...。

ちなみに言い忘れていましたが、テキスト、ボックスはどちらもHTMLのdiv要素です。サンプルなどを作成していただけると幸いですが、説明だけでも構いません。

ご回答どうかよろしくお願いいたします。

追記：一応ですがコードをお載せいたします。

$(function () {
    $(".name").hover(
        function () {
            $(".selint").slideDown("fast")
        },
        function () {
            $(".selint").slideUp("fast")
        }
    );
});

---

<dl>
    <dt>Founder</dt>
    <dd><div class="name">1<div class="selint">text1</div></div></dd>
</dl>

<dl>
    <dt>Leader</dt>
    <dd><div class="name">2<div class="selint">text2</div></div></dd>
    <dd><div class="name">3<div class="selint">text3</div></div></dd>
    <dd><div class="name">4<div class="selint">text4</div></div></dd>
</dl>

<dl>
    <dt>Member</dt>
    <dd><div class="name">5<div class="selint">text5/div></div></dd>
    <dd><div class="name">6<div class="selint">text6</div></div></dd>
    <!-- 今後増えて行きます。 -->
</dl>

---

dl {
    margin-bottom: 50px;
}

dt {
    font-size: 30px;
    width: 150px;
    margin: auto;
    border-bottom: 2px solid;
}

.name {
    color: #333;
    font-size: 30px;
    width: 200px;
    margin: 10px;
    display: inline-block;
    border-bottom: dashed 1px #555;
}

.selint {
    font-family: Meiryo;
    display: none;
    width: 200px;
    top: 40px;
    background-color: #444;
    padding: 5px;
    color: #fff;
    font-size: 15px;
}

---

一見関係がなさそうなコードも、原因や修正した方が良い点などがある可能性があるので、一応載せておきました。

Comments

[takasima20]

ソース出したら回答つきやすいと思いますよ。

[masac225]

分かりました、追記しておきます。

Answer 1

横からで大変恐縮なのですが、ちょっと補足として…

コードそのものは先に書かれたお二人のものどちらでも問題なく動作すると思われます。
そこにもうちょっとプラスする感じのところで、参考までに。

//.hover(function(){...})でアニメーションイベントを行う場合
var parent = $('.name'); //要素の数が多い時はこんな風にキャッシュしておくと（ちょっと）高速化できます
var child = $('.selint'); // 同様（※ただし$(this).find(),$(this).children()などの対象要素の絞り込み等が無いケースには適しません）

child.css({display:'none'}); //css側で指定していればいりません。クローズアニメーションをつけたければslideUpを使う

parent.hover(
  function(){ $(this).find(child).stop(true,false).slideDown('fast') },
  function(){ $(this).find(child).stop(true,false).slideUp('fast') }
);

.hover()のように、mouseenter,mouseleaveが連続して呼び出される可能性があるイベントに対してアニメーション処理を行う場合は必ず.stop()メソッドを加えておく方が良いかなと思います。

これが無いと何度もマウスオン⇔マウスアウトを繰り返す（繰り返してしまう）とその回数分きっちりアニメーションが発生します。
（※とっくに要素からカーソルを外していても、繰り返した回数をすべてこなすまで止まりません）

第一引数:true,第二引数:falseは、「（この要素がアニメーション中なら）追加のアニメーションキューは削除し、アニメーションを即時完了させない」という意味になります。
.stop()の引数の指定による違いは、こちらを参照のうえ
実際に引数を変えていって試してみるとイメージしやすいと良いと思います。

.stop()
http://js.studio-kingdom.com/jquery/effects/stop

ちなみに
kentei_syunraiさんのコードでは.stop()無しでも一見アニメーションが繰り返されていないように見えますが
何度もマウスオン⇔マウスアウトを繰り返すと、その間『条件判定＋イベント分岐』が繰り返され続けています。

slideDownがdisplay:noneになっている時以外呼ばれないので
見た目上はslideToggleが発生しませんが、slideUp中にslideUpが複数回繰り返されている状態になります。
このあたりはそれぞれのイベントにconsole.logを加えてみると確認できます。

その為、マウスアウト時の挙動が若干不安定になります（操作によっては.selintが開きっぱなしで残る）
つまり、こちらでも.stop()を入れて（キューを削除して）、slideUpが繰り返し発生しないようにしておくほうが良いです。

DOMアニメーションは非常に高コストなので、連続したり複合で発生すると、
その間ページの動作が重くなったりカクついたりします。
無駄に発生しないようにしておくということを意識しておくことをおすすめいたします。

---

あと、おまけ的に覚えておいていただければ良いかな、というところで

今回のように同じhtml構造のものが大量になるケースなどであれば
イベントを関連付ける要素を変数にキャッシュしておいたほうが良いです。
$('.name').hover()にすると、「毎回」DOMエレメント内から.nameを探しに行きます。（非効率）
なので、

var parent = $('.name');
parent.hover()

のようにあらかじめ変数へキャッシュしておくと、その「探しに行く」という処理をカットできます。
jQueryは元々処理が重いので、ちょっと処理速度なども気をつかってあげると
閲覧者にとってフレンドリーなものになるかなー…ということで…
長文失礼しました。

Comments

[kentei_syunrai]

おっしゃる通りですね。
ナイスな補足ありがとうございます。

[masac225]

ああ！
丁度今、ホバーした回数分発生してしまう事に関して困っていたんです...
危うく(?)別スレで質問してしまうところでした(笑)
的確な補足、有難うございました。

また、キャッシュの指定に関しても、サイトの高速化を意識している私(もちろん皆さんも)にとって、とても有益な情報です。

改めまして、本当に有難うございました。

[manabufukai]

Re: kentei_syunraiさん
名前まで出してしまって申し訳ございませんでした…が、温かいコメント感謝いたします。
なかなかユニークなコードだなぁと興味深く拝見させていただいていました。
自分ももうちょっと複雑な処理を行う時は変数による状態判定をよく使います。

あと、一点だけ…
変数flagを宣言する際にvar宣言をされていませんが
Strictモードではエラーになるコードですし、非Strictモードでは「ローカルスコープでのグローバル変数宣言（及び代入）」になるので、
変数宣言時は必ずvar宣言しておいたほうが良いです。

[manabufukai]

Re: masac225 さん
それは何よりです。
jQyeryには便利なメソッドが沢山用意されているので、メソッドの種類を知るだけでも結構色々なことができるようになると思います。
ぜひ色々調べて書いていってみてください。どんどん楽しくなってくると思います。笑

今回はたまたまいい例を他の回答者の方々が出してらっしゃったので
補足として長々書かせていただきましたが
普段自分自身も「どこまで書くか」は結構考えたりして、「このくらいまでにしておくか」ということが多いです。
今回の自分の回答はただの「後出し」みたいなものなので、他の回答者の方々にこそ、お礼を是非。

Answer 2

$(function () {
    $(".name").hover(
        function () {
            $(this).find(".selint").slideDown("fast")
        },
        function () {
            $(this).find(".selint").slideUp("fast")
        }
    );
});

これではどうでしょう？

Comments

[masac225]

ありがとうございます！直りました！
".find"はそのように使うのですね、とても参考になりました。

Answer 3

$(function () {
  $(".name").each(function(e,v){
    $(v).children().slideUp("fast")
        
      $(v).hover(function(){
        flg = $(this).children().css("display") == "none";
        if(flg) {
          $(this).children().slideDown("fast");
        } else {
          $(this).children().slideUp("fast");                
        }
      });
    });
  });

上のHTMLの方式ならこの方法でうまくいくと思いますが。

Comments

[masac225]

子孫パラメータを使用する方法もあるのですね。
違う場面で使用する場合があるかもしれないので、覚えて置きたいと思います。