jQueryでul > liの要素を子要素から選択。

いいタイトルが浮かばなかった・・・
自己サイトを作ってる時にどん詰まりした現象をメモしておきます。

ul > li、さらにulで入れ子にした際の操作。

text~のところにhoverすると翻訳チップが出るというファンクションを組みたくて、とりあえずulでほい。
一番右のカラーボックスはliの中にulで入れ子にして、hoverアクションはなし。
チップはopacity0にしといて。animateで1にする。

だいたいこんなソース。

html

<ul class="list clearfix">
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
    </li>
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
    </li>
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
        <ul class="listBox clearfix">
            <li><div class="box red">One</div></li>
            <li><div class="box yellow">Two</div></li>
            <li><div class="box blue">Three</div></li>
        </ul>
    </li>
</ul>

js

$(function() {
    var $tip = $('.tip');

    $('.list').find('li').hover(
          function() {
            var index = $(this).index();
            $tip.eq(index).stop().animate({ 'opacity': 1 },500);
        },
        function() {
            $tip.stop().animate({ 'opacity': 0 }, 600);
        }
    );
});

で、こうなる。

うん。

うんうん。

ふぁっ！？

find('li')が悪いのか・・？要素直下選択のchildren()にしてみるか・・・

ああああ・・・・・
.children('li').children('p')にしても求めてる挙動になりませんでした。

問題点としてhoverイベントを出したい要素がliじゃなくて、その下のpタグというとこ。
なのでliじゃなく、pからliを選べば・・・

いや、そこひらめいたら天才やろぉ。さすが先輩ですわ。

治したコードはこちら。

html

<ul class="list clearfix">
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text outTip">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
    </li>
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text outTip">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
    </li>
    <li>
        <div class="tip">テキストテキストテキストテキスト</div>
        <p class="text outTip">
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext<br>
            texttexttexttext
        </p>
        <ul class="listBox clearfix">
            <li><div class="box red">One</div></li>
            <li><div class="box yellow">Two</div></li>
            <li><div class="box blue">Three</div></li>
        </ul>
    </li>
</ul>

pにoutTipというクラスをつけました。

js

$(function() {
    var $tip = $('.tip');

    $('.outTip').hover(//pのクラスにした
          function() {
            var index = $(this).parent().index();
            $tip.eq(index).stop().animate({ 'opacity': 1 },500);
        },
        function() {
            $tip.stop().animate({ 'opacity': 0 }, 600);
        }
    );
});

indexの取得を.parent()にして子要素から親を選択！！

チップでてない！！おっけええええええ！！
text~にhoverではちゃんとチップでました！

ただ.parent()にしただけやんって感じですが、この発想ないと分からないすよ〜
でもカラーボックスがボタンの役割してる際は前者の書き方で良さそう。