【jQuery】特定の文字列を持つ要素を取得、設定する 「:contains」

特定の文字列を持っている要素を取得して、その要素に対して何かスタイルをあてる、みたいなことをする場合に活用するjQueryのメソッドは、

$(“:contains(文字列)”)

を使うと便利です。

「:contains」の使い方

• containsの前にコロンをつける
• 引数に、特定したい文字列を入れる
• コロンの前に要素名を入れることで、要素を絞ることができる

というのが、containsを使う際に押さえておくべきことになります。

ボタンを押したら、男性を非表示にする

例として、下記のような名簿があった時に、

名前	性別
山田太郎	男性
鈴木一郎	男性
佐藤花子	女性
山本十郎	男性
玉田八郎	男性
斉藤六郎	男性

「女性のみ表示」ボタンを押したら、男性の行が非表示になるようなことを、：contains（）を使ってやってみたいと思います。

See the Pen xLBGaY by yukifujinami (@yfujifuji) on CodePen.0

こんな感じです。

「:contains」のサンプルコード解説

jQueryの部分を簡単に解説します。

$("button").click(function(){
 $("td:contains('男性')").parent("tr").hide();
});

ボタンがクリックされたら、”男性”を含んでいる行を特定したいので、まずは、

$(“td:contains(‘男性’)”)

で、”男性”を含むtd要素を取得します。続けて、

.parent(“tr”)

で、男性を含むtd要素の親要素を取得し、さらに続けて、

.hide()

を記述することで、男性を含む「td」の親要素「tr」を隠す（hide）となります。