제이쿼리

eq

by Kim Ara

HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>

CSS

li{border:1px solid #ddd;float:left;padding:10px;list-style-type:none;margin-right:10px}

.blue{background:blue;color:#fff}

JavaScript

$("li").eq(0).addClass("blue");

$("li").eq(1).css("background","red");

$("li:eq(2)").css("background","yellow");

$("ul").each( function( index ){
	$(this).find("li:eq(3)").css("color","red");
});
 
$("li").eq(4).mouseover(function(){
	$(this).fadeOut(1000).css("background","#ddd");
});
$("li").eq(4).mouseout(function(){
	$(this).fadeIn(1000).css("background","green");
});

$("li:nth-child(6)").css("color","blue");