본문 바로가기
javaScript/jQuery

[jQuery] 1초에 한번씩 메뉴 리스트 클래스 적용하기

by mooyou 2023. 1. 22.
728x90
300x250
SMALL
<script>
    var $listLI = $("ul.list li");
    var listLen = $listLI.length; //리스트 총개수구하기
    var i = 0; //현재 인덱스 번호를 담을 변수
    var timerID = setInterval(function(){ //1초에 한번씩 다음 함수를 실행
        $listLI.eq(i).addClass("select"); //i번째 li에 .select 클래스 붙이기
        i++; //1씩 증가 시키기
        if(i>=listLen){ // 리스트 총개수를 넘어서면 타이머 없애기
            clearInterval(timerID);
        }
        console.log(i); //제대로 동작하는지 확인하기위해 콘솔에 현대 인덱스 숫자 표시
    },1000)
</script>

<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
728x90
반응형
LIST

댓글