JQuery STEP 7 - Traversing

★ Traversing

• 자식

//자식
//- childNodes, children

$('#me').children().addClass('check'); 
$('#me').children().addClass('check')
                .css('border', '10px solid blue')
                .click(function() {
                    alert($(this).text());
                });

• 첫째 자식 > first() 이용

$('#me').children().first().addClass('check');

• 막내 자식 > last() 이용

$('#me').children().last().addClass('check');

• 둘째 > eq(num) 이용

$('#me').children().eq(1).addClass('check');

• 손자 : children().children()

$('#me').children().children().addClass('check');

• find() : 태그를 기점으로 하위 태그를 검색 > 지역

//$('#me').find('CSS 선택자')

$('.item').addClass('check');
$('#me').find('.item').addClass('check');

• 조상 탐색 : parentsUntil()

$('#me').parentsUntil('body')
            .css('border', '10px solid orange');

• 형제 탐색 : prev()

//형제 탐색
//- previousSibling, nextSibling
$('#me').prev().addClass('check');
$('#me').next().addClass('check');

• 큰형 탐색 : prev().prev()

$('#me').prev().prev().addClass('check');

• 나보다 상위 형제 : prevAll()

$('#me').prevAll().addClass('check');

• 나보다 하위 형제 : nextAll()

$('#me').nextAll().addClass('check');

• 모든 형제 : siblings()

$('#me').siblings().addClass('check');

 

 

■ HTML 코드

<h1>Axis</h1>

<input type="button" value="버튼" id="btn">
<hr>

<div>
    할아버지
    <div>
        큰아버지
        <div>사촌</div>
    </div>
    <div>
        아버지
        <div>
            큰형
            <div>조카</div>
        </div>
        <div>
            작은형
        </div>
        <div id="me">
            나
            <div>큰애</div>
            <div>
                둘째
                <div>손자</div>
            </div>
            <div>막내</div>
        </div>
        <div>
            동생
        </div>
        <div>
            막내동생
            <div>조카</div>
        </div>
    </div>
    <div>
        작은아버지
        <div>사촌</div>
    </div>
</div>

■ CSS 코드

<style>
    div {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
    }
    #me {
        outline: 5px solid black;
    }
    .check {
        background-color: gold;
    }

</style>

 

■ 표를 이용한 상황

• <td> * 50개 > 이벤트 추가
• DOM을 이용한 방식

const tbl = document.getElementById('tbl');
const tbody = document.getElementChild;

for(let i=0; i<tbody.children.length; i++) {
    for(let j=0; j<tbody.children[i].children.length; j++){
        tbody.children[i].children[j].onmouseover = function() {
            event.target.style.backgroundColor = 'gold';
        };
    }
}

• DOM을 이용한 방식 - 2 

document.querySelectorAll('#tbl td').forEach(function() {
     item.onmouseover = function() {
         event.target.style.backgroundColor = 'cornflowerblue';
     };
});

• JQuery를 이용한 방식(Best)

$('#tbl td').mouseover(function() {
    $(this).css('background-color', 'tomato');
});

• JQuery를 이용한 방식2 : each문

$('#tbl td').each((index, item) => {
    $(item).mouseover(function() {
        $(this).css('background-color', 'tomato');
    });
});

• 실행 결과

실행 결과