특정 태그 선택
문서 객체에서 특정 태그를 선택하는 방법
일반 선택자로 선택할 수도 있지만 XML 문서에서 데이터를 추출하는 데 많이 사용하는 방법
- find( ) : 특정 태그를 선택
var xml = "";
xml += '<friends>';
xml += ' <friend>';
xml += ' <name>LHM</name>';
xml += ' <language>Ruby</language>';
xml += ' </friend>';
xml += ' <friend>';
xml += ' <name>LBH</name>';
xml += ' <language>Java</language>';
xml += ' </friend>';
xml += ' <friend>';
xml += ' <name>LSH</name>';
xml += ' <language>C#</language>';
xml += ' </friend>';
xml += '</friends>';
$(function () {
var xmlDoc = $.parseXML(xml);
$(xmlDoc).find('friend').each(function (index) {
var output = '';
output += '<div>';
output += ' <h1>' + $(this).find('name').text() + '</h1>';
output += ' <p>' + $(this).find('language').text() + '</p>';
output += '</div>';
document.body.innerHTML += output;
});
});XML 문서 객체 생성 후
friend 태그를 find( ) 메서드로 파인드 후 each( ) 메서드로 각각 선택 하여 함수를 실행
parent( ) 메서드
$(function () {
$('button').click(function () {
$(this).text('비활성화하기')
$(this).parent().css('background', 'red');
$(this).parent().find('span').text('활성화')
});
});
<body>
<div>
<span>비활성화</span>
<button>활성화</button>
</div>
<div>
<span>비활성화</span>
<button>활성화</button>
</div>
</body>
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 13) - 문서 객체 조작 removeAttr( ), css( ) (0) | 2020.08.04 |
|---|---|
| JS jQuery (part. 12) - 문서 객체 조작 addClass( ), attr( ) (0) | 2020.08.03 |
| JS jQuery (part. 10) - 기본 필터 메서드 (0) | 2020.07.31 |
| JS jQuery (part. 09) - 옵션 객체 보완 (0) | 2020.07.30 |
| JS jQuery (part. 08) - 충돌 방지 (0) | 2020.07.30 |
