가희의자기개발블로그
찾은 노드 다루기 본문
01_소개
여기서 찾은 노드란? 다음과 같이 jQuery 메서드를 활용해 구해 놓은 노드를 말한다.
var $divs = $("div");
var $items = $(".menu li");위의 구문을 실행하면 $divs와 $items에는 각각 선택자에 해당하는 노드가 담겨 있을 것이다.
이때 담겨 있는 노드의 개수라든지 또는 담겨 있는 노드 중 특정 노드만을 걸러내야 하는 작업을 하게 된다.
02_핵심 내용
02_1 찾은 노드의 개수 구하기
$대상.lengthjQuery의 length 프로퍼티를 이용하면 jQuery 객체 내부에 들어있는 노드 개수를 구할 수 있다.
02_2 찾은 노드 중 n번째 노드 접근하기
$대상.eq(index)jQuery dml eq()메서드를 이용해면 찾은 노드의 n번째에 해당하는 노드에 접근 할 수 있다.
02_3 자바스크립트 DOM객체 접근하기
$대상.get(index)jQuery는 만능이 아니다. jQuery에서 지원하지 않는 기능은 이 기능을 갖고 있는 자바스크립트 DOM에 직접 접근해 사용해야 할 때가 있다.
예를 들어 자바스크립트 DOM에는 적용된 스타일 속성값을 완전히 제거할 수 있는 removeProperty()라는 메서드가 있지만 jQuery는이런 기능을 지원하지 않는다. 이 경우 직접 jQuery 내부에 들어 있는 자바스크립트 DOM 객체에 직접 접근해야 한다. 이때 사용하는 메서드가 바로 get()이다.
02_4 순차적으로 찾은 노드 접근하기
$대상.each(function(index){
var $target = $(this);
또는
var $target=$대상.eq(index);
})each()메서드를 사용하면 $대상에 들어있는 노드를 좀더 쉽게 순차적으로 접근할 수 있다. each()메서드를 정확히 이해하려면 each()메서드의 실행구조와 each()메서드에 매개변수 값으로 넘겨 사용하는 함수 내부의 this개념에 대해 알아야 한다.
each() 실행 구조
먼저 each()메서드는 $대상에 들어있는 노드 개수만큼 매개변수 값으로 넘겨 받은 함수를 반복해서 호출한다.
$(this)의 의미
this는 $대상에 들어있는 index번째에 해당하는 자바스크립트 DOM을 의미한다. 먼저 익명함수 내부에서의 this는 $liList 변수의 jQuery객체 내부에 들어있는 자바스크립트 DOM 객체 중 index번째에 해당하는 자바스크립트 DOM객체이다.
그렇다며 $(this)는 무슨 의미일까? $(this)에서 this는 일반 자바스크립트 DOM객체를 의미하기 때문에 $(this)가 실행되면 이 DOM객체를 포장하고 있는 새로운 JQuery객체가 생성된다. 이렇게 생성된 jQuery객체를 이용해 원하는 작업을 하기만 하면 된다.
02_5 찾은 노드 중에서 특정 노드만 찾기
$대상.filter("선택자")
찾은 노드 중에서 특정 노드만을 걸러(filter)내고 싶을 때 filter() 메서드를 사용한다. filter()메서드가 찾는 대상은 오직 현재 찾은 노드이며 현재 찾은 노드의 자식 또는 자손 그리고 부모 노드는 모두 관련이 없다.
02_6 찾은 노드의 자손(자식포함)노드 중 특정 노드 찾기
$대상.find("선택자")찾은 노드의 자식(자손포함) 노드 중에서 특정 노드를 찾고 싶을때는 find()메서드를 사용한다.
주의해야 할 점은 find()메서드는 현재 노드가 아닌 현재 노드의 자식을 포함한 자손 노드를 검색한다는 것이다. 바로 아래 자식 노드에서 특정 노드를 찾고 싶은 경우는 자식 노드 children() 메서드를 사용한다.
| 메모_filter()와 find() 메서드의 차이 filter()메서드는 현재 노드 중에서 특정노드를 걸러내고 싶을 때 사용, 검색 대상에서 자식 및 자손 노드는 제외 find()메서드는 현재 노드의 자손 노드 중에서 특정 노드를 찾고 싶을 때 사용, 검색 대상에서 현재 노드는 제외 |
02_7 인덱스 값 구하기
$대상.index()
$목록.index($대상)
$목록.index(대상DOM)index() 메서드를 이용하면 노드가 위치한 인덱스 값을 알 수 있다.
인덱스 사용시 주의 사항
<script>
$(document).ready(function() {
$("ul li a").click(function() {
console.log("index = " + $(this).index());
})
});
</script>
</head>
<body>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</body>
위 문서처럼 <a> 태그가 <li>태그에 하나씩 있을 경우. 즉 연속해서 태그가 있지 않은 경우 jQuery객체.index()메서드를 호출 하면 인덱스 값이 항상 0이 나온다.
그렇기 때문에
$document.ready(function(){
var $aList = $("ul li a");
$aList.click(function(){
alert("index ="+$aList.index(this));
})
})이렇게 바꿔줘야 한다.
'프론트엔드 > JavaScript+JQuery' 카테고리의 다른 글
| 부모 노드 찾기 (0) | 2020.06.30 |
|---|---|
| 자식 노드 찾기 (0) | 2020.06.30 |
| jQuery의 정체 (0) | 2020.06.28 |
| JQuery 개발 환경 설정 (0) | 2020.06.28 |
| jQuery를 사용하는 이유 (0) | 2020.06.24 |