jQuery 배열 관리와 객체 확장

09 Dec 2020 in Programming on JavaScript

배열 관리 - each

• each 메소드로 배열 관리를 할 수 있다. 두가지 방법으로 사용된다.

  1. $.each(object,function(index,item){})

     object가 배열이고, 이걸 index는 0~object.length-1 까지, item은 object[index]를 의미한다. {}안에 실행할 코드를 넣는다.

  2. $(selector).each(function(index,item){})

     selector가 배열로 반환된다.

1. $.each(object,function(index,item){})

• div wrapper에 jquery를 이용해 링크를 넣어주도록 할 것이다.

  

• html 는 이렇게 놔둘 것이다. jquery 만으로 위처럼 링크를 넣어볼 것이다.

  <div id = "wrapper"></div>
  

• temp에 link 정보들을 다 넣는다. 그리고 each문을 다 돌고 난 후 temp를 html 에 넣는다.

  <script>
      $(function(){
      var array = [
          {"name":"naver","link":"http://www.naver.com"},
          {"name":"google","link":"http://www.google.com"},
          {"name":"nate","link":"http://www.nate.com"}
      ];
      var temp = "";
      //item은 {,}형식으로 나온다.
      $.each(array,function(index,item){
          var name = item["name"];
          var link = item["link"];
          temp = '<p><a href =" ' + link + '">' +name+ '</a></p>'
      });
      $("#wrapper").html(temp);
  });
  

2. $(selector).each(function(index,item){})

• h2 태그를 가진 요소들을 배열로 받아서 text 정보를 붙여서 화면에 띄우기

  

• 간단하다…

  HTML

  <div id = "myData">
      <h2>Item - 0 </h2>
      <h2>Item - 1</h2>
      <h2>Item - 2 </h2>
      <h2>Item - 3 </h2>
      <h2>Item - 4 </h2>
  </div>
  

  JQUERY

  var temp2 = '';
  $('h2').each(function(index,item){
      temp2 =+$(item).text();
  });
  alert(temp2);
  

• 하나 짚고 넘어갈 것은, .text()는 jquery함수이고 item은 html 객체라는 것이다. html 객체를 jquery 객체로 바꿔줘야지 jquery 함수를 쓸 수 있다.

• innerHTML 을 쓴다면 jquert 객체로 만들어줄 필요가 없어서 다음과 같이 쓰면 된다.

  temp2 =+item.innerHTML;
  cf) temp2 =+$(item).text();

객체 확장 - extend

• object에 addObject1,addObject2를 붙인다. 이렇게 하면 object에 정보가 추가된다.

  $.extend(object,addObject1,addObject2)
  

• map객체에 $.extend() 함수를 이용해서 정보를 더 추가한다.

$(function(){
	var obj = {name:'핀'};
	$.extend(obj,{age :'3',book:'우리는 언젠가 만난다.'})
	var temp ="";
	$.each(obj,function(key, item){
		temp +=key + " is " +item +"\n";
		})
		alert(temp)
})

끝