출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]

each$.each( ) 메서드의 콜백 함수

each() > 하나의 행을 다루는 핸들러 / 함수

        $(document).ready(function() {
            // 배열의 반복 처리를 위한 each 메소드
            // $.each(배열의 원본, callbck : 하나의 행을 처리하는 함수)
            
            // 배열 생성
            var links = [
                {name:'네이버', url:'http://www.naver.com'},
                {name:'다음', url:'http://www.daum.net'},
                {name:'구글', url:'http://www.google.com'},
            ];
            
            var output='';
            
            $.each(links, function(index,item){
                console.log(index, item);
                
                output += '<h1><a href="'+item.url+'">'+item.name+'</a></h1>';
            })     
                document.body.innerHTML +=output;
           
            
        });

 

addclass() 메서드

 

        $(document).ready(function() {
            $('h1').addClass('title');
 
            $('h1').each(function(index, item) {
                if (index % 2 == 0) {
                    $(item).css('color', 'red');
                }
            });
 
        });
    </script>
    <style>
        .title {
            background-color: beige;
            font-style: italic;
        }
    </style>
</head>
 
<body>
 
    <h1> h1 - 1 </h1>
    <h1> h1 - 2 </h1>
    <h1> h1 - 3 </h1>
    <h1> h1 - 4 </h1>
    <h1> h1 - 5 </h1>

        $(document).ready(function() {
//            $('h1').addClass('title');
 
            $('h1').each(function(index, item) {
                if (index % 2 == 0) {
                    /*$(item).css('color', 'red');*/
                    $(item).addClass('title')
                }
            });
 
        });
    </script>
    <style>
        .title {
            background-color: beige;
            font-style: italic;
        }
    </style>
</head>
 
<body>
 
    <h1> h1 - 1 </h1>
    <h1> h1 - 2 </h1>
    <h1> h1 - 3 </h1>
    <h1> h1 - 4 </h1>
    <h1> h1 - 5 </h1>

'front-end > Javascript & jquery' 카테고리의 다른 글

[jquery] innerhtml과 같은 기능  (0) 2020.12.02
[jquery] 특정태그 선택 / xml 파싱 / $.parseXML()  (0) 2020.12.02
[jquery] 문서 객체 선택과 탐색 / filter / end / eq / first / last / add  (0) 2020.12.02
[jquery] 기본  (0) 2020.12.02
[자바스크립트 ] 이벤트 삭제  (0) 2020.11.30
[자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation  (0) 2020.11.30
[자바스크립트] 유효성검사  (0) 2020.11.30

+ Recent posts

티스토리툴바