자바스크립트 [ .parant() / .children() / .html() ] 메서드 활용하기

<tr>
    <td></td>
    <td class="merong">메롱</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
    <button onclick="return findMerong(this);">메롱을찾아라</button>
    </td>
</tr>

findMerong

 

<script>
function findMerong(data) { //data는 현재 위치
	console.log(data);
	console.log($(data).parent());
	console.log($(data).parent().parent().children('.merong').html());
	$('#foundMerong').html($(data).parent().parent().children('.merong').html());
} 
</script>

data 즉 현재 누른 버튼의 부모의 부모의 자식은 td가 된다.

여러개의 td중 merong이라는 클래스명을 가진 태그의 요소안의 내용을 .html()을 통해 가져온다

가져와서 아래의 foundMerong아이디를 가진 h4태그의 요소에 .html()을 통해 내용을 삽입한다

<h4 id="foundMerong">내용</h4>