DOM選択処理：調査｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
Search

jQuery APIリファレンスDOM選択処理：調査


  1. add(expr)〔マッチした要素集合に、指定した条件式にマッチした要素を追加〕
  2. children([expr])〔マッチした要素集合の各要素の子要素をすべて取得〕
  3. closest([expr])　※v1.3~〔現在の要素を含め、指定したセレクタにマッチする最も近い親要素を含む要素集合を取得〕
  4. contents()〔マッチした要素（テキストノード含む）内にある子要素をすべて選択〕
  5. find(expr)〔指定した条件式にマッチする要素をすべて選択〕
  6. next([expr])〔指定した要素集合の各要素の次の兄弟要素の要素集合を取得〕
  7. nextAll([expr])〔現在の要素の後にある兄弟要素をすべて選択 〕
  8. offsetParent()〔最初にマッチした要素の親要素があるjQueryコレクションを返す〕
  9. parent([expr])〔マッチした要素集合の各要素の親要素を取得〕
  10. parents([expr])〔マッチした要素集合の先祖要素を取得（ルート要素除く）〕
  11. prev([expr])〔指定した要素集合の各要素の前にある兄弟要素の要素集合を取得〕
  12. prevAll([expr])〔現在の要素の前にある兄弟要素をすべて選択〕
  13. siblings([expr])〔マッチした各要素集合の兄弟要素をすべて取得〕

add(expr)
マッチした要素集合に、指定した条件式にマッチした要素を追加

2009/2/27

add(expr)　戻り値：jQuery

マッチした要素集合に、指定した条件式にマッチした要素を追加します。

  • 第1引数exprには、マッチした要素集合に追加するための文字列やDOM要素やDOM要素の配列にマッチさせる条件式を指定します。

add()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：add()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample p").css("border", "3px solid #ccc")
                    .add("span")
                    .css("background","yellow");
            });
        </script>
        <style type="text/css">
            #sample p { width:60px; height:60px; margin:10px; float:left; }
            span { clear:left; display:block;  color:blue; margin:0 10px; padding:2px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：add()の使用例 | jQuery</h1>
            <p>▼ID名が「sample」のdiv要素内にあるすべてのp要素にグレーの枠線を付け、<br>　更にそのp要素に背景色に黄色を設定したspan要素を追加します。</p>
<!-- CODE -->
            <div id="sample">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
            <p><span>このp要素に枠線はつきません</span></p>
<!-- / CODE -->
        </div>
    </body>
</html>

children([expr])
マッチした要素集合の各要素の子要素をすべて取得

2009/2/27

children([expr])　戻り値：jQuery

マッチした要素集合の各要素のユニークな直下の子要素をすべて取得します。

取得した子要素は、任意の条件式でフィルタリングしてさらに絞り込むことができます。 parents()はすべての先祖要素までたどりますが、children()は直下の子要素のみを選択します。

  • オプションの第1引数exprには、取得した子要素をさらに絞り込む条件式を指定します。

children()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：children()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* クリックした要素の子要素をすべて探す */
                $("#sample").click(function(e){
                    $("*").removeClass("hilite");
                    var $kids = $(e.target).children();
                    var len = $kids.addClass("hilite").length;
                    $("#res strong:first").text(e.target.tagName);
                    $("#res strong:last").text(len);
                    e.preventDefault();
                    return false;
                });
            });
        </script>
        <style type="text/css">
            #sample div { margin:0 10px 1em 0; padding:10px; background-color:#fff; border:3px solid #ccc; width:150px; float:left; height:8em; }
            #sample .hilite { border:1px solid red; }
            #sample span { color:blue; border:1px solid transparent; }
            #sample em { border:1px solid transparent; }
            #sample a { border:1px solid transparent; }
            #sample b { border:1px solid transparent; }
            #res { color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：children()の使用例 | jQuery</h1>
            <p>▼下記の要素をクリックすると、クリックした要素の直下の子要素を赤枠で囲います。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <div>
                    <p>This <span>is the <em>way</em> we</span> write <em>the</em> demo,</p>
                </div>
                <div>
                    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write the</button> demo,
                </div>
                <div>
                    This <span>the way we <em>write</em> the <em>demo</em> so</span><input type="text" value="early" /> in
                </div>
            </div>
            <span id="res">クリックした<strong>TAG</strong>要素の中に<strong>0</strong>つの子要素が見つかりました。</span>
<!-- / CODE -->
        </div>
    </body>
</html>

closest([expr])　※v1.3~
現在の要素を含め、指定したセレクタにマッチする最も近い親要素を含む要素集合を取得

2009/2/27

closest([expr])　戻り値：jQuery

現在の要素を含め、指定したセレクタにマッチする最も近い親要素を含む要素集合を取得します。

このメソッドは、まず現在の要素を確認し、それが指定した条件式にマッチすれば、現在の要素を返します。 もし現在の要素ががマッチしない場合は、指定された条件式とマッチする要素が見つかるまで、親の親という風にドキュメントを上へ上へと確認していきます。 マッチする要素がない場合は何も返しません。

このメソッドは、イベントを扱うのに便利です。

  • オプションの第1引数exprには要素をフィルタリングする条件式を指定します。

closest()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：closest()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(document).bind("click", function(e){
                    $(e.target).closest("li").toggleClass("hilight");
                    alert(this.closeset("li"));
                });
            });
        </script>
        <style type="text/css">
            li { margin:3px; padding:3px; background:#eee; }
            li.hilight { background:yellow; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：closest()の使用例 | jQuery</h1>
            <p>▼下記の要素をクリックすると、クリックした要素あるいはクリックした要素に最も近い親要素のクラスを切り替えます。</p>
<!-- CODE -->
            <ul>
                <li><b>Click me!</b></li>
                <li>You can also <b>Click me!</b></li>
            </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

contents()
マッチした要素（テキストノード含む）内にある子要素をすべて選択

2009/2/27

contents()　戻り値：jQuery

マッチした要素（テキストノード含む）内にある子要素をすべて選択します。
要素がインラインフレームの場合は、コンテンツドキュメントを選択します。

contents()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：contents()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* p要素内にあるすべての子要素をstrong要素で囲う */
                $("#sample a").contents().not("[nodeType=1]").wrap("<strong></strong>");
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：contents()の使用例 | jQuery</h1>
            <p>▼p要素内にあるあるすべての子要素をstrong要素で囲います。</p>
<!-- CODE -->
            <p id="sample">『PHP & JavaScript Room』のURLは、<a href="http://phpjavascriptroom.com/">http://phpjavascriptroom.com/</a>です。</p>
<!-- / CODE -->
        </div>
    </body>
</html>

find(expr)
指定した条件式にマッチする要素をすべて選択

2009/2/27

find(expr)　戻り値：jQuery

指定した条件式にマッチする要素をすべて選択します。 このメソッドは、マッチした要素に対し、さらに追加で処理したい子孫要素を見つけるのに便利です。

すべての検索はjQueryセレクタを使用して行われます（CSS1～CSS3のセレクタ使用可）。

  • 第1引数exprには、検索条件を指定します。

find()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：find()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("p").find("span").css("color","red");
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：find()の使用例 | jQuery</h1>
            <p>▼p要素内にあるspan要素の文字を赤色にします。</p>
<!-- CODE -->
            <p><span>Hello</span>, how are you?</p>
            <p>Me? I'm <span>good</span>.</p>
<!-- / CODE -->
        </div>
    </body>
</html>

テキストノードを対象に、指定した文字列を新しい文字列で置換

find()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：find()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn_rep").click(function(){
                    $('blockquote').find('*')
                        .contents().not('[nodeType=1]')
                        .each(function(){
                            var str=$(this).parent().text()
                            str=str.replace(/web/ig,"ウェブ");
                            $(this).parent().text(str);
                        });
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：find()の使用例 | jQuery</h1>
            <p>▼blockquote要素内のテキストノードを対象に、「web」を「ウェブ」に置換します。</p>
<!-- CODE -->
<!-- / CODE -->
        </div>
    </body>
</html>

next([expr])
指定した要素集合の各要素の次の兄弟要素の要素集合を取得

2009/2/27

next([expr])　戻り値：jQuery

指定した要素集合の各要素の次にあるユニークな兄弟要素を含む要素集合を取得します。

このメソッドは、各要素の次にある兄弟要素だけを取得します。
次にある兄弟要素をすべて取得するには、nextAll()を使用してください。
条件式を指定すると、戻り値の要素集合をフィルタリングすることができます。

  • オプションの第1引数exprには、戻り値の要素集合をフィルタリングする条件式を指定します。

next()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：next()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("button[disabled]").next().text("このボタンは無効化されています");
            });
        </script>
        <style type="text/css">
            button { width:8em; padding:5px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：next()の使用例 | jQuery</h1>
            <p>▼無効化されている各ボタンの次の兄弟要素を探し、そのテキストを「このボタンは無効化されています」に変更します。</p>
<!-- CODE -->
            <p><button disabled="disabled">First</button> - <span></span></p>
            <p><button>Second</button> - <span></span></p>
            <p><button disabled="disabled">Third</button> - <span></span></p>
<!-- / CODE -->
        </div>
    </body>
</html>

button要素の次にある兄弟要素をスライドアップ・ダウン

参考：Slide Elements in Different Directions

next()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：next()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("button").click(function(){
                    $(this).next().slideToggle();
                });
            });
        </script>
        <style type="text/css">
            .slide{
                position:relative;
                width:350px; height:100px;
                background-color:#ffffcc;
                border:1px solid #999;
                overflow:hidden;
            }
            .slide button {
                margin:0.7em 0 0 0.7em;
            }
            .slide div {
                position:absolute;
                left:0; bottom:0;
                width:100%; height:3em;
                padding:0 10px;
                background-color:orange;
                color:#333333;
                line-height:3em;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：next()の使用例 | jQuery</h1>
            <p>参考：<a href='http://www.learningjquery.com/2009/02/slide-elements-in-different-directions'>Slide Elements in Different Directions</a></p>
<!-- CODE -->
            <p>▼button要素の次にある兄弟要素をスライドアップ・ダウンします</p>
            <div class="slide">
                <button>スライド！</button>
                <div>ボタンをクリックするとスライドアップ・ダウンします</div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

nextAll([expr])
現在の要素の後にある兄弟要素をすべて選択

2009/2/27

nextAll([expr])　戻り値：jQuery

現在の要素の後にある兄弟要素をすべて選択します。
条件式を指定すると、マッチした要素集合をフィルタリングすることができます。

  • オプションの第1引数exprには、次にある要素をフィルタリングする条件式を指定します。

nextAll()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：nextAll()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample div:first").nextAll().addClass("after");
            });
        </script>
        <style type="text/css">
            #sample div { width:80px; height:80px; text-align:center; background:#fff; border:2px solid black; margin:10px; float:left; }
            #sample div.after { border-color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：nextAll()の使用例 | jQuery</h1>
            <p>▼最初の要素の後にある兄弟要素の枠線色を赤にします。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <div>最初の要素</div>
                <div>兄弟要素<div>子要素</div></div>
                <div>兄弟要素</div>
                <div>兄弟要素</div>
                <div>兄弟要素</div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

offsetParent()
最初にマッチした要素の親要素があるjQueryコレクションを返す

2009/2/27

offsetParent()　戻り値：jQuery

最初にマッチした要素の親要素があるjQueryコレクションを返します。

これは、相対または絶対的な位置にある最初の親要素です。
このメソッドは、表示されている要素でのみ動作します。

parent([expr])
マッチした要素集合の各要素の親要素を取得

2009/2/27

parent([expr])　戻り値：jQuery

マッチした各要素集合のユニークな親要素を含む要素集合を取得します。

条件式を指定すると、マッチする親要素を絞り込むことができます。 親要素がない場合は、長さが0のjQueryオブジェクトを返します。

  • オプションの第1引数exprには、親要素をフィルタリングする条件式を指定します。

parent()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：parent()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample", document.body).each(function () {
                    /* （親要素 &gt; 子要素）のように、各要素の親要素を表示 */
                    var parentTag = $(this).parent().get(0).tagName;
                    $(this).prepend(document.createTextNode(parentTag + " > "));
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：parent()の使用例 | jQuery</h1>
            <p>▼ID名が「sample」のdiv要素内の各要素の親要素を(parent &gt; child)として表示します。</p>
<!-- CODE -->
            <div id="sample">div, 
                <span>span, </span>
                <b>b </b>
              </div>
              <p>p, 
                <span>span, 
                  <em>em </em>
                </span>
              </p>
              <div>div, 
                <strong>strong, 
                  <span>span, </span>
                  <em>em, 
                    <b>b, </b>
                  </em>
                </strong>
                <b>b </b>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

parents([expr])
マッチした要素集合の先祖要素を取得（ルート要素除く）

2009/2/27

parents([expr])　戻り値：jQuery

マッチした要素集合のユニークな先祖要素を含む要素集合を取得します（ルート要素は除く）。
条件式を指定すると、マッチした要素集合をフィルタリングすることができます。

  • オプションの第1引数exprには、先祖要素をフィルタリングする条件式を指定します。

parents()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：parents()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var parentEls = $("b").parents()
                    .map(function () { 
                        return this.tagName; 
                    })
                    .get().join(", ");
                    $("b").append("<strong>" + parentEls + "</strong>");
            });
            </script>
            <style type="text/css">
            b { color:blue; }
            strong { color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：parent()の使用例 | jQuery</h1>
            <p>▼b要素の親要素の要素名を表示します。</p>
<!-- CODE -->
            <div>
                <p>
                    <span>
                        <b>My parents are: </b>
                    </span>
                </p>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

例：閉じるボタンをクリックすると、そのボタンの親要素であるパネルを閉じます。

parents()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：parents()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".pane .delete").click(function(){
                    $(this).parents(".pane").animate({ opacity:'hide' }, "slow");
                });
            });
            </script>
            <style type="text/css">
            .pane { background:#ffeff2; padding:10px 20px 10px; position:relative; border-top:solid 2px #ffcfd9; }
            .pane .delete { position:absolute; top:10px; right:10px; cursor:pointer; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：parent()の使用例 | jQuery</h1>
            <p>▼右上の閉じるボタンをクリックすると、そのパネルを非表示にします。</p>
<!-- CODE -->
            <div class="pane">
                <h3>見出し１</h3>
                <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
                <img src="/content/img/icon/color/action_delete.gif" alt="delete" class="delete" />
            </div>
            <div class="pane">
                <h3>見出し２</h3>
                <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
                <img src="/content/img/icon/color/action_delete.gif" alt="delete" class="delete" />
            </div>
            <div class="pane">
                <h3>見出し３</h3>
                <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
                <img src="/content/img/icon/color/action_delete.gif" alt="delete" class="delete" />
            </div>
            <div class="pane">
                <h3>見出し４</h3>
                <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
                <img src="/content/img/icon/color/action_delete.gif" alt="delete" class="delete" />
            </div>
            <div class="pane">
                <h3>見出し５</h3>
                <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
                <img src="/content/img/icon/color/action_delete.gif" alt="delete" class="delete" />
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

prev([expr])
指定した要素集合の各要素の前にある兄弟要素の要素集合を取得

2009/2/27

prev([expr])　戻り値：jQuery

マッチした各要素集合の前にあるユニークな兄弟要素を含む要素集合を取得します。

条件式を指定すると、マッチした要素集合をフィルタリングすることができます。
前にある兄弟要素すべてではなく、直前の兄弟要素だけが返されます。

  • オプションの第1引数exprには、前にある要素をフィルタリングする条件式を指定します。

prev()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：prev()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var $cur=$("#start");
                $cur.css("background","#f99");
                $("button").click(function(){
                    $cur=$cur.prev();
                    $("#sample div").css("background", "");
                    $cur.css("background", "yellow");
                });
            });
            </script>
            <style type="text/css">
            #sample div { width:40px; height:40px; margin:10px; float:left; border:3px solid #ccc; padding:2px; background:#fff; }
            #sample p { clear:both; margin:10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：prev()の使用例 | jQuery</h1>
            <p>▼【前へ】ボタンをクリックすると、各div要素の直前にある兄弟要素の背景色を黄色にします。</p>
<!-- CODE -->
            <div id="sample">
                <div></div>
                <div></div>
                <div><span>has child</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div id="start"></div>
                <div></div>
                <p><button>前へ</button></p>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

prevAll([expr])
現在の要素の前にある兄弟要素をすべて選択

2009/2/27

prevAll([expr])　戻り値：jQuery

現在の要素の前にある兄弟要素をすべて選択します。
条件式を指定すると、マッチした要素集合をフィルタリングすることができます。

  • オプションの第1引数exprには、前にある要素をフィルタリングする条件式を指定します。

prevAll()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：prevAll()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample div:last").prevAll().addClass("before");
            });
            </script>
            <style type="text/css">
            #sample div { width:40px; height:40px; margin:10px; float:left; border:3px solid #ccc; padding:2px; background:#fff; }
            #sample div.before { border-color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：prevAll()の使用例 | jQuery</h1>
            <p>▼最後のdiv要素の前にすべてのdiv要素を移動し、移動したdiv要素の枠線を赤色にします。</p>
<!-- CODE -->
            <div id="sample">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

siblings([expr])
マッチした各要素集合の兄弟要素をすべて取得

2009/2/27

siblings([expr])　戻り値：jQuery

マッチした各要素集合のユニークな兄弟要素をすべて含む要素集合を取得します。
条件式を指定すると、マッチした要素集合をフィルタリングすることができます。

  • オプションの第1引数exprには、兄弟要素をフィルタリングする条件式を指定します。

siblings()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：調査：siblings()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var len=$(".hilite").siblings()
                    .css("color", "red")
                    .length;
                $("strong").text(len);
            });
            </script>
            <style type="text/css">
            #sample ul { width:40px; height:40px; float:left; height:8em; }
            #sample p { clear:both; }
            .hilite { background:yellow; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：調査：siblings()の使用例 | jQuery</h1>
            <p>▼3つのリストから黄色いli要素の兄弟要素を見つけ、文字色を赤色にします（適切なら他の黄色いli要素を含む）。</p>
<!-- CODE -->
            <div id="sample">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li class="hilite">Three</li>
                    <li>Four</li>
                </ul>
                <ul>
                    <li>Five</li>
                    <li>Six</li>
                    <li>Seven</li>
                </ul>
                <ul>
                    <li>Eight</li>
                    <li class="hilite">Nine</li>
                    <li>Ten</li>
                    <li class="hilite">Eleven</li>
                </ul>
                <p>ユニークな兄弟要素：<strong></strong></p>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop