Jam's story

[JQuery] wrap()/upwrap() 본문

WEB/JQuery

[JQuery] wrap()/upwrap()

애플쩀 2022. 6. 14. 09:55

태그를 감싸는 예제  -wrap() 

<script>
    var ptags=$("p");
    $("button").click(function(){
        //모든 p태그를 div 태그로 감싸겠다. 
        ptags.wrap("<div></div>") 
        
    });
</script>
 

태그를 감싸져 잇는지 확인하고, 감싼거 푸는예제  -upwrap()

 

<script>
    var ptags = $("p");
$("button").click(function(event) {
    // p 태그가 div 태그로 감싸져잇다면 
    //parent()는 직계부모 
    if (ptags.parent().is("div")) {//작계부모가 div인지? = div로 감싸져있는지
        ptags.unwrap(); //풀기
    } else {//포장되어있지않다면 감싸기 
        ptags.wrap("<div></div>");
    }
});
</script>

 

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.14 09:47:46</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    p{
        background-color: yellow;
        margin: 4px;
    }
    div{
        border: 2px solid blue;
    }
</style>
</head>
<body>
<h3>ex04.html</h3>
<pre>
wrap() unwrap()<br>
</pre>
<button>wrap</button>
<p>Lorem.</p>
<p>Excepturi?</p>
<p>A!</p>
<!-- //태그를 감싸는 예제  -wrap() 
<script>
    var ptags=$("p");
    $("button").click(function(){
        //모든 p태그를 div 태그로 감싸겠다. 
        ptags.wrap("<div></div>") 
        
    });
</script> -->

//태그를 감싸져 잇는지 확인하고, 감싼거 푸는예제  -upwrap() 
<script>
    var ptags = $("p");
$("button").click(function(event) {
    // p 태그가 div 태그로 감싸져잇다면 
    //parent()는 직계부모 
    if (ptags.parent().is("div")) {//작계부모가 div인지? = div로 감싸져있는지
        ptags.unwrap(); //풀기
    } else {//포장되어있지않다면 감싸기 
        ptags.wrap("<div></div>");
    }
});
</script>
</body>
</html>
저작자표시

'WEB > JQuery' 카테고리의 다른 글

[JQuery] 남은시간 계산하여 표시  (0) 2022.06.14
[JQuery] on() , one(), off()  (0) 2022.06.14
[JQuery] $.fn= jQuery.fn = jQuery.prototype  (0) 2022.06.14
[JQuery] jQuery noConflict() -$ 기호 충돌문제 해결  (0) 2022.06.14
[JQuery] Traversing  (0) 2022.06.13
'WEB/JQuery' Related Articles more
Comments