.contents()
.contents()
설명 : 텍스트 노드와 주석 노드를 포함하여 일치하는 요소 세트에서 각 요소의 하위 항목을 가져옵니다.
DOM 요소 집합을 나타내는 jQuery 객체가 주어지면이 .contents()메소드를 사용하여 DOM 트리에서 이러한 요소가있는 하위 요소를 검색하고 일치하는 요소에서 새 jQuery 객체를 생성 할 수 있습니다. .contents()및 .children()방법은 전자가 결과의 jQuery 객체의 텍스트 노드 및 주석 노드뿐만 아니라 HTML 요소를 포함하는 것을 제외하고, 비슷합니다. 대부분의 jQuery 작업은 텍스트 노드와 주석 노드를 지원하지 않는다는 점에 유의하십시오. 몇 가지는 API 문서 페이지에 명시 적으로 유의해야합니다.
이 .contents()메소드는 iframe이 기본 페이지와 동일한 도메인에있는 경우 iframe의 내용 문서를 가져 오는 데에도 사용할 수 있습니다.
<div>여러 개의 텍스트 노드가 있는 간단한 것을 생각해보십시오. 각 노드는 두 개의 줄 바꿈 요소 ( <br>)로 구분됩니다 .
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</div>
이 .contents()방법을 사용 하여이 텍스트 블록을 세 개의 잘 구성된 단락으로 변환하는 데 도움을 줄 수 있습니다
$( ".container" )
.contents()
.filter(function() {
return this.nodeType === 3;
})
.wrap( "<p></p>" )
.end()
.filter( "br" )
.remove();
이 코드는 먼저의 내용을 검색 <div class="container">한 다음 단락 태그에 싸여있는 텍스트 노드를 필터링합니다. 이것은 요소 의 .nodeType속성 을 테스트하여 수행됩니다 . 이 DOM 속성은 노드의 유형을 나타내는 숫자 코드를 포함합니다. 텍스트 노드는 코드 3을 사용합니다. 내용은 다시 필터링되고, <br />요소는 이번에 는 제거되며,이 요소는 제거됩니다.
예 :
단락 안에있는 모든 텍스트 노드를 찾아서 굵은 태그로 둘러 쌉니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
<script>
$( "p" )
.contents()
.filter(function(){
return this.nodeType !== 1;
})
.wrap( "<b></b>" );
</script>
</body>
</html>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 86 | 기타 | 21년 전 | 3940 | ||
| 85 | JavaScript | 21년 전 | 3336 | ||
| 84 | 기타 | 21년 전 | 4410 | ||
| 83 | 기타 | 21년 전 | 5615 | ||
| 82 | 기타 | 21년 전 | 3141 | ||
| 81 | JavaScript | 21년 전 | 3798 | ||
| 80 | JavaScript | 21년 전 | 5333 | ||
| 79 | MySQL | 21년 전 | 4469 | ||
| 78 | MySQL | 21년 전 | 5101 | ||
| 77 | MySQL | 21년 전 | 4691 | ||
| 76 | MySQL | 21년 전 | 7150 | ||
| 75 | MySQL | 21년 전 | 4803 | ||
| 74 | MySQL | 21년 전 | 11634 | ||
| 73 | MySQL | 21년 전 | 4269 | ||
| 72 | MySQL | 21년 전 | 4789 | ||
| 71 | MySQL | 21년 전 | 16074 | ||
| 70 | MySQL | 21년 전 | 6155 | ||
| 69 | MySQL | 21년 전 | 5329 | ||
| 68 | MySQL | 21년 전 | 7941 | ||
| 67 | JavaScript | 21년 전 | 5032 | ||
| 66 | MySQL | 21년 전 | 8913 | ||
| 65 | MySQL | 21년 전 | 7740 | ||
| 64 | MySQL | 21년 전 | 8223 | ||
| 63 | MySQL | 21년 전 | 5878 | ||
| 62 | MySQL | 21년 전 | 8331 | ||
| 61 | JavaScript | 21년 전 | 4406 | ||
| 60 | 기타 | 21년 전 | 4339 | ||
| 59 | 기타 | 21년 전 | 3580 | ||
| 58 | 기타 | 21년 전 | 4251 | ||
| 57 | 기타 | 21년 전 | 4145 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기