오봉이와 함께하는 개발 블로그

jQuery - each() 메소드 본문

FE/jQuery

jQuery - each() 메소드

오봉봉이 2021. 12. 15. 09:27
728x90

each() 메소드

  • $(선택자).each(콜백함수function(){});
  • $.each(배열, 콜백함수);
  • $.each(객체, 콜백함수);
each() 메소드 예제 - eachFunction.html
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {
                $('div').each(function() {
                    console.log($(this).text()); // 텍스트 읽어오기 a, b, c 출력
                });
                $('div').each(function(index) {
                    console.log($(this).text(index)); // 텍스트로 출력하기     S.fn.init [div]
                                                                            // 0: div
                                                                            // length: 1
                });
                //$.each(배열, 콜백함수)
                var names = ["홍길동", "이몽룡", "성춘향", "변학도"];
                $.each(names, function(index, value){
                    console.log(index + " : " + value);
                });
                // 0 : 홍길동
                // 1 : 이몽룡
                // 2 : 성춘향
                // 3 : 변학도
                // 인덱스 번호 : 이름

                //$.each(객체, 콜백함수)
                // 사용자 정의 객체 생성
                let car = {
                no : "11가 1111", // 프로퍼티(속성) : 값
                name : "소나타",
                maker : "현대",
                cc : 2000,
                year : 2021
            };
            $.each(car, function(prop, value) {
                console.log(prop + " : " + value);
            });
            // no : 11가 1111
            // name : 소나타
            // maker : 현대
            // cc : 2000
            // year : 2021
            // 프로퍼티(속성) : 값
           });
        </script>
</head>
<body>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</body>
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - DOM 요소의 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
jQuery - 이벤트  (0) 2021.12.14
jQuery - 변수  (0) 2021.12.14
jQuery - 속성 선택자  (0) 2021.12.14
'FE/jQuery' Related Articles more
Comments