본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드5-4. jquery 요소의 조작2(wrap, each, map)

by 이쟝 2022. 2. 16.

1.  객체 감싸기: wrap( ), wrapAll( ), wrapInner( ), unwrap( )

  • wrap( ) : 선택자를 특정 태그로 각각 감싼다.
  • wrapAll( ) : 선택자를 특정 태그로 한 번에 감싼다.
  • wrapInner( ) : 선택자의 하위를 특정 태그로 감싼다.(선택한 요소 안을 감싸는 새로운 요소를 추가한다.)
  • unwrap( ) : 선택자의 부모 객체를 삭제한다. 

1. HTML 파일

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 핸들러2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	ul, li{
		padding:0;
		list-style-type: none;
	}
	div{
		border:1px solid green; 
		margin: 5px;
	}
</style>
<script src="javascript.js"></script>
</head>
<body>
<div class="c1">객체조작메서드111</div>
<div class="c1">객체조작메서드222</div>
<div class="c2">객체조작메서드333</div>
<div class="c2">객체조작메서드444</div>
<ul id="list">
	<li>객체 조작 메서드 AAA</li>
	<li>객체 조작 메서드 BBB</li>
	<li>객체 조작 메서드 CCC</li>
	<li>객체 조작 메서드 DDD</li>
</ul>
</body>
</html>

1. wrap( )

  • js파일: id c1을 <h1> 태그로 감싼다.
$(function(){
	
	$(".c1").wrap("<h1/>");

});

 

2. wrapAll( )

  • js파일: id c2을 <div> 태그로 감싼다.
$(function(){

	$(".c2").wrapAll("<div/>");
	
});

3. wrapInner( )

  • js파일: id c2를 <b>로 감싼다.(선택한 요소 안을 감싸는 새로운 요소를 추가한다.)
$(function(){
	
	$(".c2").wrapInner("<b/>");
	
});

4. unwrap( )

  • c1 선택자의 부모 객체인 h1 태그를 삭제한다.
$(function(){
	
	$(".c1").wrap("<h1/>");
    
	$(".c1").unwrap();
    
});

2.  반복문  처리: each( )

  • each( ) : 선택한 요소가 여러 개일 때 각각에 대하여 반복해서 함수를 실행시킨다.
  • 매개변수로 index(인덱스 번호) element(HTML 요소)를 받아서 처리한다.
$(function(){
	
	$("ul>li").each(function(idx, element){
		$(element).html("<b>each() 함수를 이용한 반복처리("+idx+")</b>");
	});
    
        $("ul>li").each(function(idx, element){
		let result = $(element).html("<b>each() 함수를 이용한 반복처리("+idx+")</b>");
		$(result).text();
	});
});

3.  배열을 이용한 반복문 처리함수: map( )

  • map( )은 HTML요소를 대상으로 반복처리를 할 수 있다.
  • 매개변수로 value(값), index(인덱스 번호)를 받아서 처리한다. (each와는 다르게 두번째 매개변수로 index가 온다.)
$(function(){
	
	let hobbyList = ["달리기","걷기","마라톤","경보","400허들","높이뛰기","멀리뛰기","원반던지기"];
		
	// body에 select 태그 추가	
	$("body").append("<select name='hobby'></select>");
	
	// select 태그 안에 넣은 내용 추가
	hobbyList.map(function(data, idx){
    			// 속성선택자
		$("select[name=hobby]").append("<option value='"+data+"'>"+data+"("+(idx+1)+")</option>");
	});
    
});

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드5-6. jquery 요소의 조작(수치 함수 메서드)  (0) 2022.02.16
프론트엔드5-5. jquery 요소의 조작3(addClass,removeClass,hasClass,toggleClass)  (0) 2022.02.16
프론트엔드5-3. jquery 요소의 조작1(추가, 삭제, 변경, 복사)  (0) 2022.02.16
프론트엔드5-2. jquery의 선택자-2  (0) 2022.02.15
프론트엔드5-1. jquery의 기초와 선택자-1  (0) 2022.02.15

관련글

티스토리툴바