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