jQuery - コンテンツフィルター

公開日:2018-12-10 更新日:2019-05-14
[jQuery]

1. 概要

コンテンツフィルターで要素を指定します。

$("セレクタ:contains(値)")
$("セレクタ:empty")
$("セレクタ:has(値)")
$("セレクタ:parent")

2.1 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <form id="a">
    <div>1. apple</div>
    <div>2. orange</div>
    <div></div>
    <div>4. banana</div>
    <div>
      <div class="info">5. strawberry</div>
      <div></div>
    </div>
  </form>
  
  <!-- Script -->
  <script>
    $(function(){
      //対象:orange を含む div 要素 -> 文字を赤くする
      $("div:contains('orange')").css("color", "red");
      
      //対象:空の要素 -> 「empty」と表示する
      $(":empty").html("empty");

      //対象:.info を持つ div 要素 -> 背景をグレーにする
      $("div:has('.info')").css("background-color", "#333");
    });
  </script>

</body></html>


実行結果:画面