【jQuery】特定文字列が含まれているかを判定|:contains()

jQueryで特定文字列が含まれているか判定する|:contains()
この記事は約3分で読めます。

特定文字列が含まれている時、手間かかるかもと思っていたけどif文も書かずにクリア出来て嬉しかったのでご紹介します。
今回はリストの中に、特定文字が存在していたらを判断します。

下のボタンを押して特定文字列が含まれる文字色を変更します。

  • Google
  • Apple
  • Facebook
  • Amazon
「Google」を赤にする
「Apple」を黒にする
「Facebook」を青にする
「Amazon」をオレンジにする
色をもとに戻す

HTML

<div class="demo1">
 <p>下のボタンを押して特定文字列が含まれる文字色を変更します。</p>
 <ul>
  <li>Google</li>
  <li>Apple</li>
  <li>Facebook</li>
  <li>Amazon</li>
 </ul>
 <div class="btn">「Google」を赤にする</div>
 <div class="btn2">「Apple」を黒にする</div>
 <div class="btn3">「Facebook」を青にする</div>
 <div class="btn4">「Amazon」をオレンジにする</div>
 <div class="btn5">色をもとに戻す</div>
</div>

jQuery

// Googleボタン
$(".demo1 .btn").on("click", function(){
 var txt = "Google";
 $(".demo1 li:contains(" + txt + ")").css({color: "#e24f72"});
});
// Appleボタン
$(".demo1 .btn2").on("click", function(){
 var txt = "Apple";
 $(".demo1 li:contains(" + txt + ")").css({color: "#4e4e4e"});
});
// Facebookボタン
$(".demo1 .btn3").on("click", function(){
 var txt = "Facebook";
 $(".demo1 li:contains(" + txt + ")").css({color: "#1c70c8"});
});
// Amazonボタン
$(".demo1 .btn4").on("click", function(){
 var txt = "Amazon";
 $(".demo1 li:contains(" + txt + ")").css({color: "#e78433"});
});
// もとに戻すボタン
$(".demo1 .btn5").on("click", function(){
 $(".demo1 li").css({color: "#cccccc"});
});
javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました