[Jquery] Each()함수를 사용한 li값 가져오기

원주남자
포로그래밍/jQuery
2020. 12. 3.

안녕하세요? 오늘은 Each()함수에 대해서 확인해보겠습니다.

Each함수는 for처럼 반복하면서 array이나 특정object/선택자를 검사/관리하는 함수라고 볼 수있는데요.

콜백함수의 인자로는 index(순번), item(데이터)가 있습니다.

사용방법은 크게 2가지 방법이 있다고 볼 수 있습니다.

//1. 배열
$.each(배열객체, function(index, item)){
   //하고 싶은 내용
});

//2. 선택자
$("선택자").each(function(index, item)){
   //하고 싶은 내용
});

좀 더 빠른 이해를 위해서 예제하나를 볼게요.

먼저 배열을 사용한 케이스입니다.

var array_test = ["1","2","3"];
$.each(array_test, function(index, item){
	console.log(item);
});

간단하죠? 배열에 들어가 있는 값인 1, 2, 3을 확인해봤습니다.

두번째는 선택자를 사용한 케이스입니다.

<!doctype html>
<html lang="ko">
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
	ul{list-style-type: none;}
  </style>
 </head>
 <body>

  <ul id="menu1">
	<li>철수1</li>
	<li>영희1</li>
	<li>길동1</li>
	<li>둘리1</li>
  </ul>

  <ul id="menu2">
	<li>철수2</li>
	<li>영희2</li>
	<li>길동2</li>
	<li>둘리2</li>
  </ul>
  

   <script>	
   $("li").each(function( index, element ) {
     console.log(element);
   });
  </script>

 </body>
</html>

보시면 아시겠지만 html상에 존재하는 모든 li태그전체가 추출이 되었습니다.

일반적으로 개발을 하실때 li태그자체가 아닌 철수1, 영희1..처럼 값을 뽑아와야 할 경우가 더 많을 것입니다.

이 번에는 두번째 ul태그내의 값들만 가져와 볼게요.

<!doctype html>
<html lang="ko">
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
	ul{list-style-type: none;}
  </style>
 </head>
 <body>

  <ul id="menu1">
	<li>철수1</li>
	<li>영희1</li>
	<li>길동1</li>
	<li>둘리1</li>
  </ul>

  <ul id="menu2">
	<li>철수2</li>
	<li>영희2</li>
	<li>길동2</li>
	<li>둘리2</li>
  </ul>
  

   <script>	
   $("#menu2 li").each(function( index, element ) {
     console.log($(this).text());
   });
  </script>

 </body>
</html>

보시면 아시겠지만 선택자 영역에 $("#menu2 li")를 사용하여 정확하게 어디에있는 li태그인지를 표시해주었습니다.

또한 추출한 값은 단순 element가 아닌 this를 사용해서 값을 가져온 것을 확인할 수 있습니다.

this는 다음 포스팅에서 좀 더 자세히 알아볼게요~

저작자표시 비영리 변경금지

'포로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] JSON데이터를 활용한 table만들기 (0)	2020.12.10
[jQuery] 이벤트 사용시 $(this)의미와 활용 (0)	2020.12.08
[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0)	2020.11.29
[jQuery]CSS, 스타일 적용하기(width, height, display등등) (0)	2019.07.10
[jQuery]ul안쪽의 li태그의 동적 추가(append) 및 삭제(remove) (2)	2019.07.08

원주남자