.replaceAll()
원문 링크 
http://api.jquery.com/replaceAll/
개요 : 조건에 맞는 요소들을 타겟(target)요소들로 대체합니다.
- .replaceAll( target )
- target 대체 요소를 나타내는 선택자
.replaceAll() 함수는 .replaceWith()를 모티브로 해서 만들었지만, 소스와 타겟의 위치는 바뀌어 있습니다. DOM 구조를 보시죠.
<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div>
엘리먼트=요소를 만들어서 다른 요소를 대체해 보시죠.
$('<h2>New heading</h2>').replaceAll('.inner');결과는 아래처럼:
<div class="container"> <h2>New heading</h2> <h2>New heading</h2> <h2>New heading</h2> </div>
또는, 기존의 것을 선택해서 요소를 대체할 수도 있습니다.
$('.first').replaceAll('.third');DOM 구조의 결과를 보시면:
<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
위 예를 보면, 선택된 요소는 이전 위치에서 옮겨져 타겟을 대체한다는 것을 볼 수 있습니다. 기존 위치에 남아 복사되는 것이 아닙니다.
예 제
모든 문단의 텍스트를 굵은 글씨를 대체합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples</script>
</body>
</html>
미리보기
모두 굵은 글씨의 Paragraph로 바꼈네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 텍스트만 알아내기, text() (5) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 수직 스크롤 이동, scrollTop() (2) | 2011.11.22 |
| jQuery API 정복 - 수평 스크롤 이동, scrollLeft() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceWith() (0) | 2011.11.22 |
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |
| jQuery API 정복 - 클래스 제거, removeClass() (1) | 2011.11.22 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 제거, remove() (0) | 2011.11.22 |