【JQuery】指定した要素を見つける(兄弟)

投稿者: | 2020年11月3日
JQueryアイキャッチ画像

今回は兄弟階層に色をつけていきたいと思います。

それではいってみましょう

 

自分以外の兄弟全部

siblings

下記の例はthreeクラス(自分)以外の兄弟要素全部が赤色に変わります。

jquery siblings

 

 

指定した要素の次の兄弟要素のみ

next

下記の例はthreeクラスのh3の次のli要素の基点1のみが赤色に変わります。

JQuery next

 

 

指定した次の要素から兄弟階層の指定要素の前まで

nextUntil

下記の例はthreeクラスのh3の次の要素からfourクラスの1個前の要素までが赤色に変わります。

nextUntil

 

 

指定した要素の次の要素から兄弟全部

nextAll

下記の例はthreeクラスのh3の次の要素から全部が赤色に変わります。

nextAllnextAll_DOM

注意

サイト上の見た目とDOMでの見た目が違うので注意です。

DOM上ではきちんとh3の次の要素から兄弟全部にstyle属性が効いています。

兄弟の最後にulがあるためにそれ以下全部に赤色が適用されています。

 

 

指定した要素の1つ前の兄弟要素のみ

prev

下記の例はfourクラスのひとつ前のli要素の基点3のみが赤色に変わります。

prev

 

 

指定した要素の1つ前から兄弟全部の要素

prevAll

下記の例はfourクラスの1つ前のli要素の基点3から前の兄弟全部が赤色に変わります。

prevAll

 

 

指定した要素の1つ前から兄弟の指定要素の一つ後まで

prevUntil

下記の例はfourクラスの1つ前のli要素の基点3からli要素の基点1の文字が含まれる1つ後ろまでが赤色に変わります。

prevUntil

 

 

まとめ

今回は兄弟要素のいろいろをデモしてみました。

指定した要素の次の要素から兄弟全部のulが難解な動きをしましたがDOM上ではきちんと兄弟要素にstyle属性が効いてるのが確認できました。

このようにweb上の見た目とDOMとでは見た目が違うので意図しない動きになった時はDOMを見ていけばどこにstyle属性が効いてるかが一目瞭然なのでこの機会にDOMの階層構造もきちんと覚えていきましょう(*^^)v

以上です。