jQueryのセレクター３ parent/contains/hasセレクター

jQueryのセレクター３　parent/contains/hasセレクター

2015年8月3日

前回と同様にjQueryのセレクターを紹介します。

parentセレクター

parentセレクターは、何かしらの子要素や何かしらの
文字を含む要素を指定できるセレクタです。
CSS3のempty擬似クラスと逆のセレクターです。

contains/hasセレクター

containsセレクターは特定の文字列が含まれている要素を
hasセレクターは特定の要素が含まれている要素を指定できます。

下記のサンプルコードだと、「東京」という文字が含まれて
いるので文字が太く、赤くなります。

「神奈川」と文字列を<strong>タグで
囲っているので青くなります。

そして、parentで指定している<li>タグで何かしらの
子要素、文字を含んでいる物の背景は黄緑になります。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    ul{
        list-style-type:decimal;
        margin-left:24px;
        font-size:16px;
        background-color:#f0f0f0; 
        font-family:"メイリオ";}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

<ul>
    <li>栃木</li>
    <li></li>
    <li>東京</li>
    <li><strong>神奈川</strong></li>
    <li>群馬</li>
</ul>
    
</div><!--contatiner-->

<script>
$(document).ready(function(){

    //containsセレクター使用例
    $("li:contains('東京')").css({
        //単数のCSSのプロパティ変更時と記載方法が異なるので注意
        "color":"red",
        "font-weight":"bold"
    });

    //hasセレクター使用例
    $("li:has(strong)").css("color","blue");

    //parentセレクター使用例
    $("li:parent").css("background-color","greenyellow");
});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

ul{

list-style-type:decimal;

margin-left:24px;

font-size:16px;

background-color:#f0f0f0;

font-family:"メイリオ";}

</style>

</head>

<body>

<ul>

</ul>

</div>

$(document).ready(function(){

//containsセレクター使用例

$("li:contains('東京')").css({

//単数のCSSのプロパティ変更時と記載方法が異なるので注意

"color":"red",

"font-weight":"bold"

});

//hasセレクター使用例

$("li:has(strong)").css("color","blue");

//parentセレクター使用例

$("li:parent").css("background-color","greenyellow");

});

</script>

</body>

</html>