웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
바로 위의 부모로부터 몇 번째 자식요소인지 자바스크립트를 사용하여 알아내는 방법입니다.
function getIndex(selector) {
var elem = document.querySelector(selector);
for(var i = 0; i < elem.parentNode.childNodes.length; i++) {
if (elem.parentNode.childNodes[i] === elem) {
console.log('elemIndex = ' + i);
}
}
}
var elem = document.querySelector(selector);
for(var i = 0; i < elem.parentNode.childNodes.length; i++) {
if (elem.parentNode.childNodes[i] === elem) {
console.log('elemIndex = ' + i);
}
}
}
아래는 간단한 예제입니다.
<ul>
<li>0</li>
<li id="test">1</li>
<li>2</li>
</ul>
<li>0</li>
<li id="test">1</li>
<li>2</li>
</ul>
위 코드를 사용하면 id값으로 test를 가진 li 태그가 부모가 가진 자식 요소 중에서 몇 번째에 해당하는지 알아볼 수 있습니다.
getIndex('#id');
> eleIndex = 1
> eleIndex = 1
이와같이 해당 요소가 부모가 가진 자식 요소 중에서 몇 번째에 해당하는지 순서(index)를 반환합니다.
아래의 글도 찾고 계시지 않나요?
