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


Webデザイン入門オンライン講座 Udemy


特定の文字列を持っている要素を取得して、その要素に対して何かスタイルをあてる、みたいなことをする場合に活用する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)となります。

あわせて読みたい