兄弟要素のjQuery検索メソッド_jquery

この記事の例では、ピア要素を検索する jQuery メソッドについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. next() メソッド

は、一致する各要素の直後にある単一の兄弟要素を検索するために使用されます。必要に応じて、兄弟要素をフィルターするセレクターを指定することもできます。 構文形式は次のとおりです。

コードをコピー コードは次のとおりです:

next([selector])

$("p").next("p").css("color", "#FCF");

2. nextAll() メソッド

は、一致する各要素の直後にあるすべての兄弟要素を検索するために使用されます。必要に応じて、セレクターを指定して兄弟要素

をフィルターすることもできます。

コードをコピー コードは次のとおりです:

nextAll([selector])

$("p").nextAll().css("color", "blue");

3. nextUtil() メソッド

は、指定されたセレクターに一致する要素まで (ただし、セレクターを含まない)、一致する各要素の直後の兄弟要素を次の形式で取得するために使用されます:

コードをコピー コードは次のとおりです:

nextUtil([selector])

例:

コードをコピー コードは次のとおりです:

$("#div1").nextUtil( "div" ).css("border", "1px 赤一色");

ID div1 の要素から次の div 要素の末尾までのすべての中間兄弟要素の境界線を赤に設定します

4. prev() メソッド

は、一致する各要素の直前にある単一の兄弟要素を検索するために使用されます。必要に応じて、兄弟要素をフィルターするセレクターを指定することもできます。 構文形式は次のとおりです。

コードをコピー コードは次のとおりです:prev([selector])

例:

コードをコピー コードは次のとおりです:$("#div2").prev( "span" ).css("color", "blue");

div2要素の直前のspan要素のフォントが青色になります。

5. prevAll() メソッド

は、現在の要素の前にあるすべての兄弟要素を検索するために使用されます。セレクターを指定して兄弟要素をフィルターすることもできます。構文形式は次のとおりです:

コードをコピー コードは次のとおりです:prevAll([selector])

6. prevUtil() メソッド

は、一致する要素が見つかるまで、現在の要素の前にあるすべての兄弟要素を検索するために使用されます。構文形式は次のとおりです。

コードをコピーします コードは次のとおりです:prevUtil([selector]) $("#div2").prevUtil("input").css("color", "red");

7.兄弟()メソッド

は、一致する各要素のすべての兄弟要素を検索するために使用されます。必要に応じて、これらの兄弟要素をフィルターするセレクターを指定することもできます。形式は次のとおりです:

コードをコピー コードは次のとおりです:siblings([selector]) $("div").siblings().css("color", "red");

例は次のとおりです:

コードをコピー コードは次のとおりです:

<スクリプト言語="javascript" タイプ="text/javascript"> $(document).ready(function(){
$("#td1").next().css("color","re​​d"); // td 要素の次の兄弟要素のフォントの色を設定します
$("#td1").nextAll().css("border","1px plain blue");//td 要素の背後にあるすべての兄弟要素の境界線を設定します
$("#td2").prev().css("color","#99c"); // td 要素の前の兄弟要素のフォントの色を設定します
$("#td2").prevAll().css("background","#FCF");//td 要素の前にあるすべての兄弟要素の背景を設定します
$("#td3").siblings().css("color","#99F"); //現在のフィールド内の指定された要素の兄弟要素のフォントの色を設定します
})

ホテル客室宿泊状況表

<テーブル幅="637" 高さ="351" ボーダー="1">
シングルルーム(すでに入居中) ダブルルーム(宿泊不可) デラックス スイート (宿泊済み) シングルルーム (すでに占有されています) デラックス スイート (宿泊なし)

シングルルーム ダブルルーム(宿泊なし) デラックス スイート (宿泊なし) シングルルーム(宿泊なし) デラックス スイート(宿泊なし)

シングルルーム(宿泊なし) ダブルルーム(宿泊なし) デラックス スイート (宿泊済み)
シングルルーム デラックス スイート(宿泊なし)

シングルルーム ダブルルーム(満室) デラックス スイート(宿泊なし) シングルルーム(宿泊なし) デラックス スイート(宿泊済み)

シングルルーム ダブルルーム(宿泊なし) デラックス スイート(宿泊済み) シングルルーム デラックス スイート(宿泊なし)





レンダリングは次のとおりです:

この記事が皆さんの jQuery プログラミングに役立つことを願っています。