jQuery 공작소 : .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="//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_test span {
border-radius : 5px;
border : 5px solid gray;
padding : 7px;
}
</style>
<div class="css_test">
jQuery 공작소에 방문해 주셔서 감사드립니다.
<br><br>
닭 <img src="//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)이 생기는 이유는 뒷쪽에 있는 "엔터" 도 텍스트이기 때문입니다.
- 닭 뒤에 빈 네모칸(span)이 생기는 이유는 뒷쪽에 있는 "엔터" 도 텍스트이기 때문입니다.
예제 2
텍스트만 남기고 모두 제거
보기
jQuery 공작소에 방문해 주셔서 감사드립니다.
닭
닭
소스
<div class="css_test">
jQuery 공작소에 방문해 주셔서 감사드립니<b>다.</b>
<br><br>
닭 <img src="//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 공작소에 방문해 주셔서 감사드립니<b>다.</b>
<br><br>
닭 <img src="//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/