「jQuery」containsメソッドで指定内容が含まれる要素をチェックする

2022年8月19日

環境
Google Chrome　104.0.5112.81
jQuery 3.6.0

構文
var 変数名 = $(“セレクター名:contains(文字列)");
変数名.イベント名(xxx);
セレクターの後に:contains()を追記し、()の中に文字列を指定します。
指定したセレクターで文字列を含む要素を指定します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#show").click(function(){   
    //pタグに指定した内容「to」が含まれる要素を指定
    var cft = $("p.cft:contains('to')");
     cft.css("background", "gold");
  });
});
</script>
</head>
<body>
<p style="text-align: center" class="cft">122 tokyo and 44 toho </p>
<button id="show">表示</button>

</body>
</html>

実行結果
「表示」ボタンを押すと、段落Pタグに「to」が含まれるためP要素の背景色を「gold」に変更します。

jQuery

Posted by arkgame

関連投稿: