.contents()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

contents 메서드는 지정한 요소의 내용을 객체형태로 반환합니다.
html 메서드와는 조금 다른데요. 예제로 살펴봅니다~!

+_+
예제 1
기본예제 - 텍스트요소만 span 으로 둘러싸기
보기
jQuery 공작소에 방문해 주셔서 감사드립니다.

소스
<style type="text/css">
    .css_test span {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
    }
</style>

<div class="css_test">
jQuery 공작소에 방문해 주셔서 감사드립니다.
<br><br>
닭 <img src="http://superkts.com/img/css/bird17.gif" />
</div>

<button type="button" onclick="j_test()">버튼을 눌러보세요.</button>

<script type="text/javascript">

    function j_test(){

        // 보기 편하게 여러줄로 코딩
        $( '.css_test' )
        .contents()
        .filter(function() { // filter 메서드를 사용하여 내용을 골라낸다.
            return this.nodeType === 3; // nodeType 3 은 텍스트를 의미합니다.
            // 내용이 텍스트 인것만 반환합니다.
        })
        .wrap('<span>'); // 해당 텍스트를 span 태그로 둘러쌉니다.
    }

</script>
관련 CSS
jQuery
- contents 메서드는 내용을 객체형태로 가져오므로 원하는 처리를 더 편하게 할 수 있습니다.
- 닭 뒤에 빈 네모칸(span)이 생기는 이유는 뒷쪽에 있는 "엔터" 도 텍스트이기 때문입니다.
예제 2
텍스트만 남기고 모두 제거
보기
jQuery 공작소에 방문해 주셔서 감사드립니다.

소스
<div class="css_test">
jQuery 공작소에 방문해 주셔서 감사드립니<b>다.</b>
<br><br>
닭 <img src="http://superkts.com/img/css/bird17.gif" />
</div>

<button type="button" onclick="j_test()">버튼을 눌러보세요.</button>

<script type="text/javascript">
    function j_test(){
        $( '.css_test' )
        .contents()
        .filter(function() {
            return this.nodeType !== 3; // 텍스트를 제외한 요소만 반환
        })
        .remove(); // 제거한다.
    }
</script>
jQuery
- 텍스트만 남긴 예제입니다.
jQuery 홈페이지 .contents() API 문서 : http://api.jquery.com/contents/