目的を持ってAjaxを使うためにjQueryの文法を知ろう：jQueryで学ぶ簡単で効果的なAjaxの使い方（2）（2/3 ページ）

» 2009年04月06日 00時00分公開

jQueryのオブジェクトは親子の関係が大事

　jQueryオブジェクトの機能の詳細については、まず以下の表を参照ください。


メソッド名	概要
parent()	各要素の親要素をすべて返す
parents()	各要素の先祖要素をすべて返す
children()	要素内のすべての子要素を返すが、孫要素は含まない
表　ちょっと分かりにくいjQueryのメソッド

　これらの機能を把握するために、以下のような構造化された文章をjQueryで操作してみましょう。

  <body>

            <div id="saruzo" class="saru">(・ω・｀)さるぞう

              <div id="sarusuke" class="saru">(・ェ・｀)さるすけ</div>

              <div id="saruemon" class="saru">

                ('ェ'｀)さるえもん

                <span id="sarutaro" class="saru">('ε')さるたろう</span>

              </div>

            </div>

        </body>

図2　parent()やparents()、children()を使って要素内の親要素や子要素を選択できる

　例えば、絵の中のサルの家族で考えてみると、「さるぞう」の子供は「さるすけ」「さるえもん」で、「さるえもん」の子供は「さるたろう」です。なので、「さるすけ」「さるえもん」に対してparent()を使った場合、「さるぞう」を選択できます。

　しかし、「さるたろう」に対して、「さるぞう」は先祖関係にあるので、parents()を使わないと選択できません。また、children()を使ったときは、子供は選択できるけれど、孫は選択できないので、「さるぞう」に対して使用した場合は「さるたろう」は選択されません。

　下のサンプルプログラム内では、ボタンを押したときにそれぞれの親要素と子要素を表示させています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html"; 

            charset="utf-8" />

          <script type="text/javascript" 

            src="/lib/jquery/jquery-1.3.1.min.js">

          </script>

          <script type="text/javascript">

            function show(target){

                var message1 = $(target).get(0).id + "の子供は";

                var children = $(target).children().get();

                for (var i = 0; i < children.length; i++) {

                    message1 += children[i].id + ",";

                }

        

                var message2 = $(target).get(0).id + "の親は";

                var parent = $(target).parent().get();

                for(var i=0;i<parent.length;i++){

                    message2 += parent[i].id+",";

                }

        

                $("#message1").html(message1);

                $("#message2").html(message2);

            }

          </script>

          

          <style TYPE="text/css">

          .saru {

            border: 1px solid gray;

            display: block;

            padding: 8px;

            margin: 8px;

          }

          </style>

          

          </head>

          <body>

            <div id="saruzo" class="saru">(・ω・｀)さるぞう

            <div id="sarusuke" class="saru">(・ェ・｀)さるすけ</div>

            <div id="saruemon" class="saru">

                ('ェ'｀)さるえもん

              <span id="sarutaro" class="saru">

                ('ε')さるたろう

              </span>

            </div>

          </div>

          <!-- メッセージ表示領域 -->

          <div id="message1"></div>

          <div id="message2"></div>

        

          <button onclick="show('#saruzo')">さるぞう</button>

          <button onclick="show('#sarusuke')">さるすけ</button>

          <button onclick="show('#saruemon')">さるえもん</button>

          <button onclick="show('#sarutaro')">さるたろう</button>

          </body>

          </html>