.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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4856 | PHP | 7년 전 | 5730 | ||
| 4855 | jQuery | 7년 전 | 3234 | ||
| 4854 | jQuery | 7년 전 | 2225 | ||
| 4853 | jQuery | 7년 전 | 2826 | ||
| 4852 | MySQL | 7년 전 | 2993 | ||
| 4851 | jQuery | 7년 전 | 2339 | ||
| 4850 | jQuery | 7년 전 | 2569 | ||
| 4849 | jQuery | 7년 전 | 4307 | ||
| 4848 | PHP |
 terrorboy |
7년 전 | 4246 | |
| 4847 | jQuery | 7년 전 | 4019 | ||
| 4846 | jQuery | 7년 전 | 2631 | ||
| 4845 | jQuery | 7년 전 | 2151 | ||
| 4844 | jQuery | 7년 전 | 2299 | ||
| 4843 | jQuery | 7년 전 | 3054 | ||
| 4842 | jQuery | 7년 전 | 2898 | ||
| 4841 | jQuery | 7년 전 | 2228 | ||
| 4840 | jQuery | 7년 전 | 1565 | ||
| 4839 | jQuery | 7년 전 | 2466 | ||
| 4838 | jQuery |
이에스씨코리아
|
7년 전 | 2312 | |
| 4837 | jQuery | 7년 전 | 2161 | ||
| 4836 | jQuery | 7년 전 | 2086 | ||
| 4835 | jQuery | 7년 전 | 1819 | ||
| 4834 | jQuery | 7년 전 | 1865 | ||
| 4833 | jQuery | 7년 전 | 1992 | ||
| 4832 | jQuery | 7년 전 | 2184 | ||
| 4831 | jQuery | 7년 전 | 2363 | ||
| 4830 | jQuery | 7년 전 | 2629 | ||
| 4829 | jQuery | 7년 전 | 1802 | ||
| 4828 | jQuery | 8년 전 | 2744 | ||
| 4827 | jQuery | 8년 전 | 2282 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기