タグ別アーカイブ: children

div全体をクリック対象に変更する

今回は div タグにリンク(a タグ)があった場合に、div タグ全体をリンク対象にしてみます。
まぁ、有名な定番プラグインもあるんですが、オブジェクト内の別オブジェクトを選択する調査でもあります。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

               $('#linkBox1').click(function(){
                   window.location=$(this).children('p').children('a').attr('href');
                   return false;
               });

               $('#linkBox2').click(function(){
                   window.location=$(this).find('a').attr('href');
                   return false;
               });

               $('#linkBox3').click(function(){
                   window.location=$('a', $(this)).attr('href');
                   return false;
               });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            .linkBox {
                margin-bottom    : 300px;
                width            : 300px;
                height           : 200px;
                background-color : #ffff00;
            }

            .linkBox:hover {
                cursor           : pointer;
            }

        --></style>
        
    </head>
    <body>

        <div id="linkBox1" class="linkBox">
            <p>
                Linx Box 1<br />
                <a href="#linkBox2">Move Linx Box 2</a>
            </p>
        </div>

        <div id="linkBox2" class="linkBox">
            <p>
                Linx Box 2<br />
                <a href="#linkBox3">Move Linx Box 3</a>
            </p>
        </div>

        <div id="linkBox3" class="linkBox">
            <p>
                Linx Box 3<br />
                <a href="#linkBox1">Move Linx Box 1</a>
            </p>
        </div>

    </body>
</html>

sample

これで div タグ全体がリンク対象になったかと思います。

さて今回の調査結果ですが、いくつかあるんですね。
 $(this).children(‘a’)
 $(this).find(‘a’)
 $(‘a’, $(this))

「$(this).children」に関しては、$(this) 直下のオブジェクトしか選択できないようです。
複数階層ある場合に、直下のオブジェクトのみ対象とするにはこの方法かと思います。

「$(this).find(‘a’)」と「$(‘a’, $(this))」の違いはよくわかりませんでした。
どちらの書き方でも $(this)の配下にある全ての a タグを対象にすることが可能でした。
書き型的には「$(this).find(‘a’)」が正しいのかなとも思いますが・・・

なぜ、同じような意味の書き方が複数存在するのかまでは調査していません。
誰か知っている人がいたら教えてください。

ちなみに、「$(this).find(‘p:last>a’)」などで最後の p タグの リンク といった選択もできるみたいです。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。