制作・管理ツールスマホPC・MacガジェットアプリMoneyOfficeLife#Amazon#Bluetooth#Composer#CSS#Docker#GAS#GoogleCloud#Googleマップ#Homebrew#HTML#JavaScript#Laravel#Node.js#PHP#ReactNative#SNS#SQL#Tasker#VSCode#WebAPI#Wi-Fi・LAN#WordPress#アクセス解析#サーバー#スプレッドシート#スマートホーム#スマホカメラ#データ通信#ネットショップ#ネット広告#ネット証券#ネット銀行#ファイル共有#ブラウザ#ポイント#不具合#動画アプリ#安い・お得#本・電子書籍#終了・廃止#購入アイテム#電子マネー・電子決済#電話・通話TwitterRSSFeedly2019/04/07Web・App制作#JavaScript【jQuery】兄弟要素を指定するメソッドまとめ|next()、prev()、siblings()など今回は、jQueryで個人的によく使用する兄弟要素(同じ階層にある要素)を指定するメソッドのまとめです。以降にある兄弟要素を指定する場合nextメソッドnextAllメソッドnextUntilメソッド前にある兄弟要素を指定する場合prevメソッドprevAllメソッドprevUntilメソッドすべての兄弟要素を指定する場合siblingsメソッドセレクタを指定して要素を取得する場合まとめ参考サイトなど以降にある兄弟要素を指定する場合nextメソッドnextメソッドは、オブジェクトで指定した要素の直後にある、兄弟要素を取得します。class='items'></div>の直後の兄弟要素を、赤色のテキストカラーにする場合。'red');nextAllメソッドnextAllメソッドは、オブジェクトで指定した要素以降にある、すべての兄弟要素を取得します。class='items'></div>以降にあるすべての兄弟要素を、赤色のテキストカラーにする場合。'red');nextUntilメソッドnextUntilメソッドは、オブジェクトで指定した要素の直後から、引数で指定した要素の前までにある兄弟要素を取得します。引数を省略した場合は、オブジェクトで指定した要素以降にあるすべての兄弟要素を取得します。class='items'></div>の直後から、classの値がselectの要素の前までにある兄弟要素を赤色のテキストカラーにする場合。'red');前にある兄弟要素を指定する場合prevメソッドprevメソッドは、オブジェクトで指定した要素の直前にある、兄弟要素を取得します。class='items'></div>の直前の兄弟要素を、赤色のテキストカラーにする場合。'red');prevAllメソッドprevAllメソッドは、オブジェクトで指定した要素の前にある、すべての兄弟要素を取得します。class='items'></div>の前にあるすべての兄弟要素を、赤色のテキストカラーにする場合。'red');prevUntilメソッドprevUntilメソッドは、オブジェクトで指定した要素の直前から、引数で指定した要素の前までにある兄弟要素を取得します。引数を省略した場合は、前にあるすべての兄弟要素を取得します。class='items'></div>の直前から、classの値がselectの要素の前までにある兄弟要素を赤色のテキストカラーにする場合。'red');すべての兄弟要素を指定する場合siblingsメソッドsiblingsメソッドは、オブジェクトで指定した要素のすべての兄弟要素を取得します。class='items'></div>のすべての兄弟要素を、赤色のテキストカラーにする場合。今回紹介した兄弟要素を指定するメソッドでは、引数にセレクタを指定することで選択する要素を絞ることができます。nextUntil、prevUntilメソッドの場合は、第2引数に要素を絞るセレクタを指定できます。class='items'></div>以降にあるすべての兄弟要素の中で、classの値がselectの要素のみを赤色のテキストカラーにする場合。'red');まとめ以上が、jQueryで個人的によく使用する兄弟要素を指定するメソッドまとめとなります。今回紹介したメソッドの詳細や、要素を指定するその他メソッドについては、以下の参考サイトを確認してみてください。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。