728x90
300x250
SMALL
방법1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리를 이용한 텍스트 가져오기</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="box"><span class="blind">삭제</span>가져올 텍스트</div>
<script>
$(document).ready(function() {
// 클래스가 'box'인 요소 내에서 직계 자식인 span을 제외한 텍스트 내용을 가져와서 출력
var text = $('.box').contents().filter(function() {
return this.nodeType === 3; // nodeType이 3인 것은 텍스트 노드
}).text().trim();
console.log(text);
});
</script>
</body>
</html>
contents() 메서드를 사용하여 box 클래스 요소 내의 모든 자식 노드를 가져온 후, 'filter()' 메서드를 사용하여 텍스트 노드만 선택한다. 그런 다음 text().trim()을 사용하여 텍스트 내용을 가져오고 앞뒤의 공백을 제거 한다.
방법2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>삭제 텍스트 제외하고 가져오기</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="box"><span class="blind">삭제</span>가져올 텍스트</div>
<script>
$(document).ready(function() {
// 'box' 클래스 요소를 복제한 후 span 요소 삭제
var clone = $('.box').clone();
clone.find('span').remove();
// 복제된 요소의 텍스트 내용을 가져와서 출력
var text = clone.text().trim();
console.log(text);
});
</script>
</body>
</html>
box 요소를 복제한후 find('span').remove()를 사용해서 해당 요소 내의 span 요소를 삭제하고, 그 후에 복제된 요소의 텍스트를 가져오는 방식
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| jQuery nice-select 다운 및 select 꾸미기 (0) | 2024.01.10 |
|---|---|
| 부드럽게 이동하기 jQuery (0) | 2024.01.09 |
| detach() 메서드 (0) | 2023.11.12 |
| 한줄 공지사항 상하 롤링 - 비공개 (0) | 2023.10.22 |
| 클래스 기반 플러그인 문법 구조 (1) | 2023.10.17 |
댓글