#jQuery. 요소반복 each()

💡개념

jQuery.each()

✔ jQuery.each() 함수는 배열이나 객체를 반복적으로 처리할 때 사용된다.
✔ 첫 번째 인자에는 자바스크립트 배열이나 래퍼세트 객체가 올 수 있다.
✔ 두 번째 인자에는 각 요소를 반복하면서 처리할 콜백 함수가 온다.
✔ 콜백 함수는 두 개의 매개변수(index: 배열인덱스, item: 반복하는 요소객체)를 갖는다.

📝예제1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    
    <script>
        var array =  [
            {
                name:'ssafy',
                link:'http://www.ssafy.com'
            },
            {
                name:'naver',
                link:'http://www.naver.com'
            },
            {
                name:'googel',
                link:'http://www.google.com'
            }
        ];
        var outHtml = '';
        $.each(array,function(index, item){
            outHtml+='<a href="'+item.link+'">';
            outHtml += '<h2>'+item.name+'</h2></a>';
        });

        $("body").html(outHtml);
    </script>
</body>
</html>

👍결과

📝예제2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .high-light-0{background-color: yellow;}
        .high-light-1{background-color: orange;}
        .high-light-2{background-color: green;}
        .high-light-3{background-color: pink;}
        .high-light-4{background-color: lime;}
        
    </style>
</head>
<body>
    <h2>첫번째</h2>
    <h2>두번째</h2>
    <h2>세번째</h2>
    <h2>네번째</h2>
    <h2>다섯번째</h2>
    <script>
        $(function(){
            $("h2").each(function(index, item){
                $(item).addClass("high-light-"+index);
            })
        });
    </script>
</body>
</html>

👍결과

Author And Source

이 문제에 관하여(#jQuery. 요소반복 each()), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gisung/jQuery.-요소반복-each

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다