.contents() 정보
jQuery .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>
0
댓글 0개