jQuery에서 .children()/.find() 의차이점
*children() 메소드: 자식노드만 가져온다.
find()메소드: 자식노드 & 자식노드의 자식노드등을 가져온다.
children() 메소드와 find 메소드를 이용해서 하위 노드 border를 설정하는 소스 예제를 보면 더 이해하기가 쉽다.
코드를 입력<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document ).ready( function(){
// children() 메소드는 자식 노드만 찾아 준다.
$(".first").children(".1" ).css("border","4px solid #f00");
// find() 메소드는 자식 노드 및 자식의 자식 등을 모두 찾아 준다.
$(".second").find(".1" ).css("border","4px solid #00f");
});
</script>
</head>
<body>
<div class="first">
<div class="1">
1
<div class="1">
1-1
</div>
</div>
</div>
<div class="second">
<div class="1">
2
<div class="1">
2-2
</div>
</div>
</div>
</body>
</html>
위의 소스 코드를 실행한 결과는 아래의 그림과 같습니다.
[출처] [jQuery] jQuery 에서 하위 노드를 가져오는 children() 과 find() 메소드 비교|작성자 까미유
하세요
기본이 튼튼해야