今回は兄弟階層に色をつけていきたいと思います。
それではいってみましょう
Menu
自分以外の兄弟全部
siblings
下記の例はthreeクラス(自分)以外の兄弟要素全部が赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.three').siblings().css("color","red");//自分以外の兄弟全部 }) }); |
指定した要素の次の兄弟要素のみ
next
下記の例はthreeクラスのh3の次のli要素の基点1のみが赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.three>h3').next().css("color","red");//クラスthreeのh3の次の要素のみ }) }); |
指定した次の要素から兄弟階層の指定要素の前まで
nextUntil
下記の例はthreeクラスのh3の次の要素からfourクラスの1個前の要素までが赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.three>h3').nextUntil('.four').css("color","red"); //指定した次の要素から同じ階層の指定の前まで }) }); |
指定した要素の次の要素から兄弟全部
nextAll
下記の例はthreeクラスのh3の次の要素から全部が赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.three>h3').nextAll().css("color","red");//クラスthreeのh3の次の要素から全部 }) }); |
注意
サイト上の見た目とDOMでの見た目が違うので注意です。
DOM上ではきちんとh3の次の要素から兄弟全部にstyle属性が効いています。
兄弟の最後にulがあるためにそれ以下全部に赤色が適用されています。
指定した要素の1つ前の兄弟要素のみ
prev
下記の例はfourクラスのひとつ前のli要素の基点3のみが赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.four').prev().css("color","red");//クラスfourの兄弟の1つ前の要素のみ }) }); |
指定した要素の1つ前から兄弟全部の要素
prevAll
下記の例はfourクラスの1つ前のli要素の基点3から前の兄弟全部が赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.four').prevAll().css("color","red");//クラスfourの兄弟の1つ前から全部 }) }); |
指定した要素の1つ前から兄弟の指定要素の一つ後まで
prevUntil
下記の例はfourクラスの1つ前のli要素の基点3からli要素の基点1の文字が含まれる1つ後ろまでが赤色に変わります。
1 2 3 4 5 | $(function() { $("button").click(function() { $('.four').prevUntil('li:contains("基点1")').css("color","red");//クラスfourの1つ前から兄弟の指定要素まで }) }); |
まとめ
今回は兄弟要素のいろいろをデモしてみました。
指定した要素の次の要素から兄弟全部のulが難解な動きをしましたがDOM上ではきちんと兄弟要素にstyle属性が効いてるのが確認できました。
このようにweb上の見た目とDOMとでは見た目が違うので意図しない動きになった時はDOMを見ていけばどこにstyle属性が効いてるかが一目瞭然なのでこの機会にDOMの階層構造もきちんと覚えていきましょう(*^^)v
以上です。