ホーム > 検索 (全7件)
  • 次の要素を探す

    ラジオボタンの次のlabel要素のテキストを取得する。

    $( 'input[type="radio"]' ).each( function() {
	var text = $(this).next( 'label' ).text();
} );

    next関数は現在の要素と同階層の次の要素を検索する。逆に前の要素を検索する場合はprev関数を使用する。

    キーワード:
  • チェックボックスのクリック時の対応を指定する

    チェックボックスのクリック時の処理を指定する。

    /* 単独のクリックイベント処理の場合 */
$( 'input[type="checkbox"]' ).click( function() {
	// ここに処理内容を記述する
} );

/* 他のクリックイベント処理へ引き継ぐ場合 */
$( 'input[type="checkbox"]' ).click( function( e ) {
	// ここに処理内容を記述する
	e.preventDefault();
} );

    属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。

    キーワード:
  • 要素名を取得する

    redクラスの要素のタグ名を取得する。

    $( '.red' ).each( function () {
	var tag = $(this).get(0).tagName;
} )

    get(0)でDOMエレメントを取得できる。DOMエレメントのtagNameプロパティの値は英大文字の要素（タグ）名である。

    キーワード:
  • 親要素を探す2

    IDがcategory-listの要素の先祖（上位要素）要素を探す。

    /* 上位のdiv要素を探す */
$( '#category-list' ).parents( 'div' ).each( function () {
	// div要素があった場合の処理
} );

/* 上位の要素数を取得する */
var elms = $( '#category-list' ).parents().length;

    parents関数は1つ上位から最上位のHTML要素までを対象にマッチする要素を取得する。すぐ上の要素はparent()関数で取得できる。

    キーワード:
  • 親要素を探す

    href属性が#tab1のa要素の親要素を探す。

    /* 親要素を探す */
var aparent = $( 'a[href=#tab1]' ).parent();

/* 親要素に'active'クラスを付ける */
$( 'a[href=#tab1]' ).parent().addClass( 'active' );

    parent関数は1つ上位の要素を取得するので、2つ上（親のさらに親）であればparent().parent()と記述すればいい。また任意の先祖であればparents()を使用すればいい。

    キーワード:
  • 列挙された要素の最初と最後の要素を探す

    IDがgnaviの子li要素の最初と最後を探す。

    /* 最初の要素を探す */
var first = $( '#gnavi li:first' );

/* 最後の要素に'last'クラスを追加する */
var last = $( '#gnavi li:last' ).addClass( 'last' );

    li要素のような列挙要素の最初や最後の要素を操作する場合に使用する。

    キーワード:
  • 子要素を探す

    IDがchecksheetの要素の子要素からinput要素を探す。

    /* 全子孫要素から探す */
$( '#checksheet' ).find( 'input' ).each( function () {
	// ここに子のinput要素の処理
} );

/* 子要素から探す（孫要素以下は検索対象外） */
$( '#checksheet' ).children( 'input' ).each( function () {
	// ここに子のinput要素の処理
} );

    検索範囲によってfind関数とchildren関数を使い分ける。

    キーワード:
 
 
常用漢字チェッカー WordPress私的マニュアル 主にjQueryのメモ