【jQuery】slice()で指定した範囲の兄弟要素を取得する!

指定した範囲の兄弟要素を取得するにはjQueryでslice()を使用します。

slice()とは指定した範囲から要素を取り出すメソッドであり、パラメータを指定することで同じ階層にある取得したい兄弟要素の範囲を指定できます。

そして、slice()にパラメータに開始インデックスを指定して使用すると、同じ階層にある兄弟要素を指定したインデックスの要素から最後の要素まで取得することができ、パラメータに開始インデックスと終了インデックスを指定すると、同じ階層にある兄弟要素を指定したインデックスの要素から終了インデックスの手前までを取得することができます。

また、パラメータのインデックスに負の整数を指定した場合は要素の末尾が開始位置となって取得の範囲を設定することになります。

今回は、jQueryのslice()を使って指定した範囲の兄弟要素を取得する方法について以下の内容で解説していきます。

⚫︎ 指定した位置から最後までの兄弟要素を指定する場合
⚫︎ 指定した範囲内の兄弟要素を指定する場合
⚫︎ 指定した範囲が兄弟要素よりも大きい場合

⚫︎ 開始位置を末尾からカウントして兄弟要素を取得する場合

ハルトさん

今回はjQueryのslice()メソッドを使用して指定した範囲の兄弟要素を取得する方法について説明していきます。

さとみさん

はい!
お願いします!

slice()とは

slice()とは指定した範囲から要素を取り出すメソッドとなります。

slice()の書き方

slice()の書き方は下記となります。

パラメータ

⚫︎ 開始インデックス:
取り出す要素の開始範囲をインデックスで指定する
⚫︎ 終了インデックス:
取り出す要素の終了範囲をインデックスで指定する
(インデックスの要素は含まれない)

slice()メソッドのパラメータに開始インデックスを指定することで、指定した位置から最後までの兄弟要素を取得することができます。
そして、開始インデックスと終了インデックスを指定することで、指定した範囲内にある兄弟要素を取得することができます。

また、一番最初のインデックスは1番目ではなく、0番目となり、終了インデックスの要素は含まれません。・

指定した範囲の兄弟要素を取得するサンプルコード

slice()メソッドで指定した範囲の兄弟要素を取得するサンプルコードを紹介します。

指定した位置から最後までの兄弟要素を取得する場合

指定した位置から最後までの兄弟要素を取得する場合はslice()のパラメータに開始インデックスを指定します。

sample.html

style.css

index.js

出力結果

slice()メソッドのパラメータに開始インデックスを指定することで指定した位置から最後までの兄弟要素を取得することができます。

そのため、btn1クラスのボタンを押すと、「案件を探す2!」以下の要素の背景色が変更され、btn2クラスのボタンを押すと「案件を探す5!」の要素の背景色が変更されます。

さとみさん

slice()メソッドのパラメータに開始インデックスを指定することで開始のインデックスからの兄弟要素を取得していますね!

ハルトさん

そうですね。
slice()のパラメータが1つの場合は開始インデックスとなり、指定したインデックスから最後までを取得するようになります。

指定した範囲内の兄弟要素を取得する場合

指定した範囲内の兄弟要素を取得する場合はslice()メソッドのパラメータに開始インデックスと終了インデックスを指定します。

sample.html

style.css

index.js

出力結果

slice()のパラメータに開始インデックスと終了インデックスを指定することで指定した範囲内の兄弟要素を指定することができます。

そのため、btnAクラスのボタンを押すと「案件を探すA!」から「案件を探すC!」までの要素の背景色が変更され、btnBクラスのボタンを押すと「案件を探すC!」から「案件を探すD!」までの背景色が変更されます。

さとみさん

slice()メソッドのパラメータに開始インデックスと終了インデックスを指定すると、指定した範囲内の兄弟要素を取得することができるんですね!

ハルトさん

そうですね。
しかし、終了インデックスのインデックスは含まれませんので注意してください。

指定した範囲が兄弟要素よりも大きい場合

指定した範囲が兄弟要素よりも大きい場合は要素の範囲外であることからslice()メソッドは無効になります。

sample.html

style.css

index.js

出力結果

slice()メソッドのパラメータの開始インデックスと終了インデックスが要素の数をオーバーしている為、slice()が無効になっています。
その為、ボタンを押しても何も起こりません。

開始位置を末尾からカウントして兄弟要素を取得する場合

開始位置を末尾からカウントして兄弟要素を取得する場合はslice()メソッドのパラメータの各インデックスに負の整数を指定します。

sample.html

style.css

index.js

出力結果

slice()メソッドのパラメータの各インデックスに負の整数を指定することで開始位置を末尾からカウントして兄弟要素を取得することができます。

その為、btn1クラスのボタンを押すと「フライテック4!」から「フライテック5!」の要素の背景色が変更され、btn2クラスのボタンを押すと「フライテック2!」と「フライテック3!」の要素の背景色が変更されます。

さとみさん

slice()のパラメータの各インデックスに負の整数を指定すると開始位置を末尾からカウントして兄弟要素を指定することができるんですね!

ハルトさん

そうですね。
slice()のパラメータが負の整数の場合は末尾からインデックス分、前に数えることになります。
その為、パラメータの関係性は開始インデックス<終了インデックスとなります。

今回のポイント

slice()で指定した要素の後の兄弟要素を全て対象

⚫︎ 指定した範囲の兄弟要素を取得するにはjQueryのslice()メソッドを使用する

⚫︎ 指定した範囲の開始から最後までの兄弟要素を取得する場合はslice()メソッドのパラメータに開始インデックスを指定する

⚫︎ 指定した範囲内の兄弟要素を取得する場合はslice()メソッドをパラメータに開始インデックスと終了インデックスを指定する

⚫︎ 指定した範囲が兄弟要素よりも大きい場合はslice()メソッドは無効になる

⚫︎ 開始位置を末尾からカウントして兄弟要素を取得する場合はslice()メソッドをパラメータの開始インデックスと終了インデックスに負の整数を指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し