jQ 5 - each()

each() : 배열객체를 순서대로 순환하는 메서드이다. 

$(셀렉터).each(function(){....}) 와 같이 작성하는데, 

function의 ()안에는 2개의 인자값이 들어가고, 첫번째는 index순서, 두번째는 배열의 값이 들어간다. 

each(function(index, item){...})와 같다. 

$(셀렉터).each()에서 셀렉터는 배열객체가 된다. 

1. 배열객체를 초기화 해두고, 여기에서 객체의 value값을 순서대로 가져오는 방법을 본다.

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

---

 $(function(){
   let arr = [
     {name : '네이버', link : 'https://www.naver.com'},
     {name : '다음', link : 'https://www.daum.net'},
     {name : '구글', link : 'https://www.google.com'}
   ];
   let output ='';
   $.each(arr, function(index, item){
   // <a href="https://naver.com">네이버</a>

    output += '<a href="'+ item.link + '">';
    output += '<h2>'+ item.name + '</h2>';
    output += '</a>';

    $('.box1').html(output);	
    });
  });

 

2. 위의 초기화 해 둔 배열객체의 value값을 순서대로 지정하는 방법을 본다.

 $('.box1').each(function(index, item){
   $(item).css('background', '#ededed');
   $(item).css('display', 'inline-block');
   $(item).css('border','1px solid #756972');
 });
 $('.box1>a').each(function(index, value){
   $(value).css('color', '#db5cc3');
   $(value).css('text-decoration', 'none');
 });

 

3. script에서 작성한 배열객체가 아닌, DOM객체의 배열요소에도 each()메서드를 활용할 수 있다.

 <h1>header 1 </h1>
 <h1>header 2 </h1>
 <h1>header 3 </h1>
 <h1>header 4 </h1>
 <h1>header 5 </h1>

---

 $('h1').each(function(index, item){
      $(item).css('color','#fff');
 });