jQuery - コンテンツフィルター
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
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>
実行結果：画面
