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

» 2009年04月06日 00時00分 公開
[安田隆次, 関川晶子，ヤスダネットワーク]
前のページへ 1|2|3 次のページへ

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()を使って要素内の親要素や子要素を選択できる 図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>

　このソースコードを実行すると、図3のように表示され、ボタンを押すとそれに対応した子供と親が表示されます。

図3　IE上での実行結果 図3　IE上での実行結果

　「さるぞう」のボタンをクリックするとその子要素である「さるすけ」「さるえもん」の名前が出てきますが、親要素はないので空欄のままです。

図4　「さるぞう」のボタンをクリック 図4　「さるぞう」のボタンをクリック

　「さるたろう」のボタンをクリックすると子要素はないので空欄になり、親要素である「さるえもん」名前が出てきます。「さるぞう」は、「さるえもん」の親（つまり、祖父）に当たるので表示されません。

図5　「さるたろう」のボタンをクリック 図5　「さるたろう」のボタンをクリック

　以上を踏まえて次ページでは、業務効率を改善するプラグインの追加とカスタマイズを行います。

前のページへ 1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

HTML5�ｽ蛛ｽX 髫ｪ蛟�ｽｺ荵斟帷ｹ晢ｽｳ郢ｧ�ｭ郢晢ｽｳ郢ｧ�ｰ

隴幢ｽｬ隴鯉ｽ･隴帷｣ｯ菫｣

注目のテーマ

4AI by ＠IT - AIを作り、動かし、守り、生かす
Microsoft ＆ Windows最前線2025
AI for エンジニアリング
ローコード／ノーコード セントラル by ＠IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by ＠IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。