ホーム > 検索 (全11件)
  • 値が定義されているか調べる

    現在の要素のid属性が指定されているか調べる。

    if ( typeof $( this ).attr( 'id' ) != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

// 変数valを調べる場合は
if ( typeof val != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

    typeof演算子で値の型を取得できる。未定義の場合は’undefined’、文字列は’string’、数値は’number’、nullまたはオブジェクトは’object’となる。

    キーワード:
  • 親要素内の順番を取得する

    現在のli要素が親のul要素内で何番目なのか取得する。

    var pos = $( this ).prevAll( 'li' ).length;
/* または、要素名を省略して */
var pos = $( this ).prevAll( ).length;

    prevAll関数で同レベルで前にある要素を取得でき、そのlengthプロパティで取得した要素数を調べることで、現在の要素が何番目がわかる。0ならば前に要素はなく現在の要素が先頭の要素となり、1ならば前に1つ要素があることを意味する。

    キーワード:
  • 配列化している要素の一部を検索する

    tbody要素内の3番目のtr要素を検索する。

    var trElm = $( 'tbody tr:eq(2)' );

/* 4番目以降のtr要素を検索する */
$( 'tbody tr:gt(2)' ).each( function () {
	/* ここに見つかったtr要素の処理を記述 */
} );

/* 2番目以前のtr要素を検索する */
$( 'tbody tr:lt(2)' ).each( function () {
	/* ここに見つかったtr要素の処理を記述 */
} );

    インデックスを指定できるセレクターとしては、:eq、:gt、:ltがある。先頭要素のインデックスを0として指定する。

    キーワード:
  • 前の要素を探す

    button要素の前にあるinput要素の値を”にする。

    /* 直前のinput要素1つだけ適用する */
$( "button" ).prev( 'input' ).val( '' );

/* 前のinput要素全てに適用する */
$( "button" ).prevAll( 'input' ).val( '' );

    探す要素が1つかすべてかでprev関数とprevAll関数を使い分ける。

    キーワード:
  • 次の要素を探す

    ラジオボタンの次の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関数を使い分ける。

    キーワード:
 
 
ツールバーへスキップ