Content Filter(コンテンツフィルタ)

by kachibito

HTML

<h2 class="clear">:contains</h2>

<ul class="contains">
    <li>list0</li>
    <li>list1(red)</li>
    <li>list2</li>
    <li>(red)list3</li>
</ul>


<h2 class="clear">:empty</h2>

<ul class="empty">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li></li>
</ul>


<h2 class="clear">:has</h2>
<ul class="has">
    <li><span>list0</span></li>
    <li>list1</li>
    <li>list2</li>
    <li><span>list3</span></li>
</ul>

<h2 class="clear">:parent</h2>
<ul class="parent">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li><span>list3</span></li>
</ul>

CSS

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}

ul{margin:15px;}
li{padding:2px 0;}

JavaScript

$(function(){
    

/* :contains */
//ul liの「red」というテキストを含む要素赤くする
 $("ul.contains li:contains('red')").css("color", "red");


/* :empty */
//ul liで要素が空のものに「無いです！」というテキストを加えて赤くする
 $("ul.empty li:empty").text("無いです!").css("color", "red");
    
 
/* :has */
//ul liでspanを持ったものだけ赤くする
 $("ul.has li:has(span)").css("color", "red");
  
    
/* :parent */
//ul li内のspanをもった親要素だけ赤くする
 $("ul.parent li span:parent").css("color", "red");
    
    
    
//end    
});