children( [selector] )

jQuery API の children( [selector] ) は、マッチした要素の子要素のうち、selectorにマッチした要素を、取得するメソッド。

記述方法

jQuery( セレクター1 ) . children( セレクター2 );

「セレクター1」にマッチした要素の子要素のうち、「セレクター2」にマッチする要素を取得。

記述例

jQuery( '#sample' ) . children();

idが「sample」である要素の子要素を取得。

jQuery( '#sample' ) . children( '.sample-children');

idが「sample」である要素の子要素のうち、クラス名が「sample-children」である要素を取得。

実装例(サンプル)

p要素1。

p要素2。

実装例(サンプル)の動作について

「toggle」ボタンをクリックすると、「p要素1」と「p要素2」の背景色を黄色にし、「p要素2」の枠線を赤色にする。

「toggle」ボタンを再度クリックすると、元に戻す。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-sample' )
                . children()
                . css( 'backgroundColor', 'yellow' );
            jQuery( '#jquery-sample' )
                . children( '.jquery-sample-children' )
                . css( 'border', '3px solid red' );
        },
        function() {
            jQuery( '#jquery-sample' )
                . children()
                . css( 'backgroundColor', 'pink' );
            jQuery( '#jquery-sample' )
                . children( '.jquery-sample-children' )
                . css( 'border', '3px solid gray' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 3px solid gray;
    border-radius: 10px;
}
#jquery-sample p {
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 3px solid gray;
    border-radius: 10px;
    color: #303030;
}
-->
</style>

HTML

<button id="jquery-sample-button">toggle</button>
<div id="jquery-sample">
    <p>p要素1。</p>
    <p class="jquery-sample-children">p要素2。</p>
</div>

スポンサード リンク

カテゴリー: API, DOMツリー, JavaScript, jQuery, トラバース タグ: パーマリンク