jQueryの:contains()の使い方とサンプルコード
18 回閲覧されました
みなさんこんにちは、jonioです。
今回はjQueryの:contains()の使い方とサンプルコードを解説します。
:contains()とは
引数に指定した文字列を含む要素を取得します。
引数には文字列のみを指定できます。
サンプルコード
下記のコードで考えます。
<table border="1" style="border-collapse: collapse">
<tbody>
<tr>
<th>名前</th>
</tr>
<tr>
<td>jonio</td>
</tr>
<tr>
<td>いさぢ</td>
</tr>
<tr>
<td>こちべる</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("tr:contains('jonio').css("background", "yellowgreen");
$("tr td:contains('いさぢ').css("background", "tomato");
$("tr td:contains('こち').css("background", "gray");
});
</script>20行目で「jonio」の記述がある部分の背景色が黄緑色になって22行目で「いさぢ」の記述がある部分の背景色がトマト色になります。
:containsの引数は完全に一致する文字列ではなくてもよく部分的に一致でもいいです。
よって24行目の「こちべる」の記述がある部分の背景色が灰色になります。