제이쿼리_1708

each, filter, fibd

by Kim Ara

HTML

<div class="tab_special">
  <ul>
    <li ><a class="on" href="#" >전체</a></li>
    <li ><a class="add" href="#" >밥솥</a></li>
    <li ><a class="pink" href="#" >전기레인지</a></li>
    <li class="stop"><a class="" href="#" >유아가전</a></li>
    <li ><a class="pink" href="#" >생활가전</a></li>
    <li ><a class="pink" href="#" >주방가전</a></li>
  </ul>
</div>

<button>button</button>

CSS

.tab_special{width:990px; margin:0 auto 20px;}
.tab_special > ul{display:inline-block; width:100%; margin-bottom:50px;}
.tab_special > ul > li{float:left; width:110px; height:104px; text-align:center; display:block;  position:relative; }
.tab_special > ul > li > a{display:block; width:110px; line-height:16px; padding-top:74px; font-size:16px; color:red; background: url(http://www.cuchen.com/images/sub/bg_tab_special.gif) no-repeat 0 0;}
.tab_special > ul > li:nth-child(2) > a{background-position:-110px 0;}
.tab_special > ul > li:nth-child(3) > a{background-position:-220px 0;}
.tab_special > ul > li:nth-child(4) > a{background-position:-330px 0;}
.tab_special > ul > li:nth-child(5) > a{background-position:-440px 0;}
.tab_special > ul > li:nth-child(6) > a{background-position:-550px 0;}
.tab_special > ul > li:nth-child(7) > a{background-position:-660px 0;}
.tab_special > ul > li:nth-child(8) > a{background-position:-770px 0;}
.tab_special > ul > li:nth-child(9) > a{background-position:-880px 0;}

/*
.tab_special > ul > li > a:hover, .tab_special > ul > li > a:focus, .tab_special > ul > li > a.on{background-position:0 -90px;}
.tab_special > ul > li:nth-child(2):hover > a, .tab_special > ul > li:nth-child(2) > a:focus, .tab_special > ul > li:nth-child(2)  a.on{background-position:-110px -90px;}
.tab_special > ul > li:nth-child(3):hover > a, .tab_special > ul > li:nth-child(3) > a:focus, .tab_special > ul > li:nth-child(3)  a.on{background-position:-220px -90px;}
.tab_special > ul > li:nth-child(4):hover > a, .tab_special > ul > li:nth-child(4) > a:focus, .tab_special > ul > li:nth-child(4) > a.on{background-position:-330px -90px;}
.tab_special > ul > li:nth-child(5):hover > a, .tab_special > ul > li:nth-child(5) > a:focus, .tab_special > ul > li:nth-child(5) > a.on{background-position:-440px -90px;}
.tab_special > ul > li:nth-child(6):hover > a, .tab_special > ul > li:nth-child(6) > a:focus, .tab_special > ul > li:nth-child(6) > a.on{background-position:-550px...

JavaScript

$(document).ready(function() {

/* each */

  $( "li > a" ).click(function() {
    $( "li > a" ).each(function() {
      $( this ).toggleClass( "example" );
    });
  });


  $( "button" ).click(function() {
    $( "li" ).each(function( index, element ) {
      // element == this
      $( element ).css( "backgroundColor", "yellow" );
      if ( $( this ).is( ".stop" ) ) {
        return false;
      }
    });
  });

/* find */
  $('ul li').find('.add').css('color','green');

/* filter */
  $( "li a" ).filter( ':even' ).css( "font-size", "20px" );    

});