Jqueryのフィルタ(contains:)で文字列を代入した変数を使う方法のメモ。
探してもなかなか見つからなくて、やっと見つけたのでメモしておきます。
contains:に変数を使った記載例
変数を使った場合のコード
$('td:contains(' + 変数名 + ')').css('background-color', 'green');
変数使わない場合のコード
$("td:contains('メモ')").css('background-color','pink');
変数名を+で囲むだけと思いきや、”を’に変えないと上手く動作してくれない不思議。
お試し用コード
実際に使えるか確かめる
| 名前 | 個数 |
|---|---|
| イチゴ | 3個 |
| 桃 | 4個 |
サンプルです。下記のコードを使って、上表の桃と記載されているセルの背景色を変えてみようと思います。
変数名はhon_nameを使用しています。
Google hromeを使っている場合、右クリック→【検証】でデベロッパーツールが表示されます。
デベロッパーツールの【console】に下記のコードを貼り付けると上記の表の桃のセルの背景色が変わると思います。
本当にできるのか確かめたい方はどうぞ。
var hon_name = "桃";
$('td:contains('+hon_name+')').css('background-color','orange');/*変数使えた!*/
JqueryのCDN読み込みコード紹介
このページで使用しているjqueryのCDN読み込みコードは下記の通りです。今回は、googleのCDNを利用しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>