[Jquery] first,last/even,odd/eq/lt,gt/slice

FIRST, LAST

첫 번째 요소와 마지막 요소를 선택할 때 사용한다.

 

        $(document).ready(function(){
           $("#menu>li").first().css("color","red")
           $("#menu>li").last().css("color","blue")
        })

 

이렇게 하면 li 중에서 첫 번째는 red, 마지막 li는 blue로 변경된다.

 

EVEN, ODD

짝수 요소와 홀수 요소를 선택할 때 사용한다.

        $(document).ready(function(){
           $("#menu>li").even().css("color","red")//짝수요소
           $("#menu>li").odd().css("color","blue")//홀수요소
        })

 

even은 짝수, odd는 홀수, 즉 아래와 같이 선택된다.

    <ul id="menu">
        <li>리스트1</li><!--index 0번째--> <!--even-->
        <li>리스트2</li><!--index 1번째--> <!--odd--> 
        <li>리스트3</li><!--index 2번째--> <!--even--> 
        <li>리스트4</li><!--index 3번째--> <!--odd--> 
        <li>리스트5</li><!--index 4번째--> <!--even-->
    </ul>

 

EQ

index의 n번 요소를 선택한다. 

 

        $(document).ready(function(){
           $("#menu>li").eq(2).css("color","red")
        })

 

위 코드는 2번 요소를 선택하게 되는데 아래와 같다.

    <ul id="menu">
        <li>리스트1</li><!--index 0번째-->
        <li>리스트2</li><!--index 1번째--> 
        <li>리스트3</li><!--index 2번째--> <!--eq(2)--> 
        <li>리스트4</li><!--index 3번째-->
        <li>리스트5</li><!--index 4번째--> 
    </ul>

 

LT, GT

lt : less than, n번째 보다 작은 것을 선택한다.

gt : greater than, n번째 보다 큰 것을 선택한다.

 

        $(document).ready(function(){
           $("#menu>li:lt(2)").css("color","red")
           //less than-li 2번째 보다 작은것-li 0번째,1번째
           $("#menu>li:gt(2)").css("color","blue")
           //greater than-li 2번째 보다 큰것-li 3번째,4번째
        })

 

위와 같이 작성하게 된다. 그렇다면 아래와 같이 선택된다.

 

    <ul id="menu">
        <li>리스트1</li><!--index 0번째--> <!--lt(2)-->
        <li>리스트2</li><!--index 1번째--> <!--lt(2)-->
        <li>리스트3</li><!--index 2번째--> <!--기준점-->
        <li>리스트4</li><!--index 3번째--> <!--gt(2)-->
        <li>리스트5</li><!--index 4번째--> <!--gt(2)--> 
    </ul>

 

SLICE

범위를 지정하여 선택한다.

 

        $(document).ready(function(){
           $("#menu>li").slice(1,3).css("color","red")
        })

 

위와 같이 작성하게 되면 1번째 이상 3번째 미만의 요소를 선택하게 된다.

 

    <ul id="menu">
        <li>리스트1</li><!--index 0번째--> 
        <li>리스트2</li><!--index 1번째--> <!--slice(1,3)-->
        <li>리스트3</li><!--index 2번째--> <!--slice(1,3)-->
        <li>리스트4</li><!--index 3번째--> 
        <li>리스트5</li><!--index 4번째--> 
    </ul>