jQuery 순회 - contents() 메서드

jQuery 순회 참조 가이드

예제

모든 텍스트 노드를 찾아 그들을 두껍게 태그로 래핑합니다.

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

직접 시험해 보세요

정의와 사용법

contents() 메서드는 일치하는 요소 집합의 각 요소의 자식 노드를 얻습니다. 텍스트와注释 노드 포함.

문법

.contents()

상세 설명

jQuery 대상 DOM 요소 집합이 주어지면, .contents() 메서드는 이 요소들의 직접 자식 노드를 검색하고, 일치하는 요소로 새 jQuery 대상을 생성할 수 있습니다. .contents()와 .children() 메서드는 유사하지만, 이전의 경우 결과 jQuery 객체에는 텍스트 노드와 HTML 요소가 포함됩니다.

.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 속성을 통해 시험된 것입니다. 이 속성은 노드 유형을 나타내는 숫자 코드를 가지고 있습니다; 텍스트 노드는 코드 3을 사용합니다. 내용이 다시 필터링되며, 이번에는 <br /> 요소를 대상으로 합니다. 이 요소들은 제거됩니다.

jQuery 순회 참조 가이드