【jQuery】:contains()で指定した内容が含まれる要素を指定する!

jQueryで指定した内容が含まれる要素を指定するには:contains()を使用します。

:contains()は、パラメータに指定された文字列を含む要素を返す擬似クラスであり、任意の文字列を含む要素を指定することができます。

また、:contains()のパラメータには文字列しか指定できませんので注意してください。
指定した文字列を変数に格納してjQueryオブジェクトとして指定すると無効になります。

今回は、jQueryで:contains()を使って指定した内容が含まれる要素を指定する方法を以下の内容で解説していきます。

⚫︎ :contains()の注意点

⚫︎ パラメータに文字列を指定して内容が含まれる要素を指定する場合
⚫︎ パラメータ無しで内容が含まれる要素を指定する場合

⚫︎ jQueryを使用せずに指定した内容が含まれる要素を指定する方法<

ハルトさん

今回はjQueryで:contains()を使用して指定した内容が含まれる要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:contains()とは

:contains()とは、パラメータに指定された文字列を含む要素を返す擬似クラスとなります。

:contains()の書き方

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

セレクターの後に:contains()を追記し、()の中に文字列を指定することで、指定したセレクターで文字列を含む要素を指定することができます。

:contains()の注意点

:contains()は先ほども説明しましたが、パラメータは文字列のみとなります。

今でのメソッドは文字列を変数に格納してjQueryオブジェクトなどで指定する事は可能でしたが、:contains()はjQueryオブジェクトで指定できません。

:contains()にjQueryオブジェクトを指定した場合は無効になります。

指定した内容が含まれる要素を指定するサンプルコード

:contains()で指定した内容が含まれる要素を指定するサンプルコードを紹介します。

パラメータに文字列を指定して内容が含まれる要素を指定する場合

パラメータに文字列を指定して内容が含まれる要素を指定する場合を見てみます。

sample.html

index.js

出力結果

:contains()に文字列を指定することで内容が含まれる要素を指定することができます。
その為、btn1クラスのボタンを押すと「任天堂」を含めたtr要素の背景色が変更され、btn2クラスのボタンを押すと、「Sony」を含めたtd要素の背景色が変更されます。

さとみさん

:contains()を使用することで任意の文字列を含む要素を指定していますね!

ハルトさん

そうですね。
:contains()のパラメータに文字列を指定することで任意の文字列を含む要素を指定しています。
しかし、パラメータの文字列は一つしか指定できませんので注意してください。

パラメータ無しで内容が含まれる要素を指定する場合

パラメータ無しで内容が含まれる要素を指定する場合を見てみます。

sample.html

index.js

出力結果

:contains()をパラメータ無しで使用すると、指定したセレクターの全てが指定されるようになります。
その為、btn1クラスのボタンを押すとテーブルセルの全ての要素の背景色が変更されます。

jQueryを使用せずに指定した内容が含まれる要素を指定する方法

jQueryを使用せず、純粋なJavaScriptで指定した内容が含まれる要素を指定してみます。

sample.html

index.js

出力結果

「任天堂」や「ソニー」がつくtr要素の背景色が変化していることから、純粋なJavaScrioptでも:contains()を使用して指定した内容が含まれる要素を指定しています。

今回のポイント

:contains()で指定した内容が含まれる要素を指定

⚫︎ jQueryで指定した内容が含まれる要素を指定するには:contains()を使用する

⚫︎ :contains()のパラメータには文字列を指定する
(指定できるのは文字列のみで変数に格納したり、jQueryオブジェクトで指定することはできない)

⚫︎ :contains()をパラメータ無しで使用すると指定した要素の全てを指定する

Writer

ST

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

最新の案件情報