find()와 children()의 작동원리

$(selector).find()

selector의 하위에 있는 모든 요소들을 찾는다.

find()에 selector를 인풋으로 주면 자식들 중 해당 selector에 매칭되는 요소들을 jquery 객체로 돌려준다.

$(selector).children()

selector의 1레벨 하위에 있는 요소들을 찾는다. (직계 자식만 찾는다)

find()와 마찬가지로 selector를 인풋으로 주었을 때 해당 selector에 매칭되는 요소들을 jquery 객체로 돌려준다.

두 함수 모두 매칭된 결과를 배열로 돌려준다. 

따라서 돌려받은 jquery 객체안에 복수의 배열이 있을 수 있다.

예를들어 $(selector).find().css('background-color','gold'); 문장을 실행하면 find()에 의해 찾은 모든 요소들의 배경색을 'gold'로 바꾼다.

* 돌려받은 배열 객체를 인덱스로 직접 접근하는 경우 jqeury 객체가 아닌 DOM객체이므로 사용에 주의한다.

예제

HTML

<div class="parent-div">
    <div class="child-div1"></div>
    <div class="child-div2"></div>
    <div class="child-div2"></div>
</div>

CSS

.child-div1{
  background-color:red;
  width:200px;
  height:100px;
}

.child-div2{
  background-color:blue;
  width:200px;
  height:100px;
}

js

$(function () {
  var $childDiv1 = $('.parent-div').find('.child-div1');
  var $childDiv2 = $('.parent-div').find('.child-div2');

  $childDiv1.text('text삽입1');
  $childDiv2.text('text삽입2');
});

상단에 .child-div1 클래스가 적용된 div를 생성했고(red)

하단에 .child-div2 클래스가 적용된 div를 두 개 생성했다(blue)

find()로 리턴받은 jquery 객체로 text를 삽입하였는데, 자식요소가 1개일때와 복수일 때 일괄 적용됨을 알 수 있다.