親子、兄弟要素

lesson15　親子、兄弟間を行き来する

特定した要素を基点として、前後、上位/下位の要素にアクセスする
詳しくは10日で覚えるの140ページ

$('#me')
.prev()　直前の兄弟要素の背景をピンクにする（下のcssまでが1セットになる）
.css('background-color', 'Pink')

.prevAll()　すべての兄弟要素を青文字にする（下のcssまでが1セットになる）
.css('color', 'Blue')

.next()　直後の兄弟要素の背景を黄色にする（下のcssまでが1セットになる）
.css('background-color', 'Yellow')

.nextAll()　すべての弟要素を赤文字にする（下のcssまでが1セットになる）
.css('color', 'Red')

.siblings()　すべての兄弟要素をイタリック体にする（下のcssまでが1セットになる）
.css('font-style', 'italic')

.parent()　親要素を赤枠で囲む（下のcssまでが1セットになる）
.css('border', 'solid 1px Red')

.parent()もある

.children()　すべての子要素のフォントサイズを最小にする（下のcssまでが1セットになる）
.css('font-size', 'x-small');

.end()　カレント要素を元の位置に（要素がjQueryによって変化した場合もとの状態に戻す役割をする）

以下の.andSelf()はボーダー設定とその前のバックグラウンドの色もそのまま生かして使用する
$('#list')
.children().css('background-color', 'Aqua')
.andSelf().css('border', 'solid 1px Red');
});

じいじ

パパ

おにいちゃん

おねえちゃん

わたし

ポチ

ミケ

弟

妹