Attribute(属性フィルタ)

by kachibito

HTML

<h2 class="clear">[Attribute]</h2>

<ul class="attribute-01">
    <li>list0</li>
    <li class="eg01 sub03">list1</li>
    <li>list2</li>
    <li class="eg02 sub04">list3</li>
</ul>


<h2 class="clear">[Attribute="value"]</h2>

<ul class="attribute-02">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute!="value"]</h2>

<ul class="attribute-03">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute^="value"]</h2>

<ul class="attribute-04">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute$="value"]</h2>

<ul class="attribute-05">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute*=value]</h2>

<ul class="attribute-06">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute~=value]</h2>

<ul class="attribute-07">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute|=value]</h2>

<ul class="attribute-08">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04">list3</li>
</ul>

<h2 class="clear">[Attribute=value][Attribute=value02]・・・</h2>

<ul class="attribute-09">
    <li>list0</li>
    <li class="eg-01 sub03">list1</li>
    <li>list2</li>
    <li class="eg-02 sub04" id="09">list3</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(){
    

/* [Attribute] */
//ul liでclassを持った要素だけ赤くする
 $("ul.attribute-01 li[class]").css("color", "red");


/* [Attribute="value"] */
//ul liでclass='eg-02 sub04'を持った要素だけ赤くする
 $("ul.attribute-02 li[class='eg-02 sub04']").css("color", "red");

    

/* [Attribute!="value"] */
//ul liでclass='eg-01 sub03'を持った要素以外を赤くする
 $("ul.attribute-03 li[class!='eg-01 sub03']").css("color", "red");   
   

/* [Attribute^="value"] */
//ul liでclass名がegで始まる要素を赤くする
 $("ul.attribute-04 li[class^='eg']").css("color", "red");
   
   
/* [Attribute$="value"] */
//ul liでclass名が04で終わる要素を赤くする
 $("ul.attribute-05 li[class$='04']").css("color", "red");
    
    
/* [Attribute*=value] */
//ul liでclass名にg-0が含まれる要素を赤くする
 $("ul.attribute-06 li[class*='g-0']").css("color", "red");
    
    
/* [Attribute~="value"] */
//ul liでclass名にsub04が含まれる要素を赤くする
 $("ul.attribute-07 li[class~='sub04']").css("color", "red");
    
   
/* [Attribute|="value"] */
//ul liでclass名がegまたはeg-**を含む要素を赤くする
 $("ul.attribute-08 li[class|='eg']").css("color", "red"); 
    
    
/* [Attribute="value"][Attribute="value02"] */
//ul liでclass='eg-02 sub04で、idも含んでいる要素を赤くする
 $("ul.attribute-09 li[class='eg-02 sub04'][id]").css("color", "red"); 
   

//end    
});