jQuery API 살펴보기 Children 메서드

2018-03-12

children, jQuery

선택자와 일치하는 요소들 각각의 자식 요소들을 반환한다.

children() 메서드의 인자로 넣은 선택자에 해당하는 DOM 요소를 찾아서 jQuery 객체로 반환시켜준다. children()와 find() 메서드의 다른점은 둘다 하위 요소들을 검색하는 것은 같은데 children() 메서드는 DOM 트리 레벨에서 바로 아래 하위 단계의 요소만 반환하고 find() 메서드는 모든 하위 요소들을 찾는데에서 차이가 있다. 그리고 children() 메서드는 text node들은 반환하지 않는다. text node 까지 얻으려면 .contents() 메서드를 사용하면 된다.

예제를 통해서 알아보자.

예제

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  div {
    width: 130px;
    height: 82px;
    margin: 10px;
    float: left;
    border: 1px solid blue;
    padding: 4px;
  }
  #container {
    width: auto;
    height: 105px;
    margin: 0;
    float: none;
    border: none;
  }
  .hilite {
    border-color: red;
  }
  #results {
    display: block;
    color: red;
  }
  p, span, em, a, b, button {
    border: 1px solid transparent;
  }
  p {
    margin: 10px;
  }
  span {
    color: blue;
  }
  input {
    width: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="container">
  <div>
    <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>
  </div>

  <div>
    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
    the</button> demo,
  </div>

  <div>
    This <span>the way we <em>write</em> the <em>demo</em> so</span>
    <input type="text" value="early"> in
  </div>

  <p>
    <span>t</span>he <span>m</span>orning.
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
  </p>
</div>

<script>
$( "#container" ).click(function ( event ) {
  $( "*" ).removeClass( "hilite" );
  var kids = $( event.target ).children();
  var len = kids.addClass( "hilite" ).length;

  $( "#results span:first" ).text( len );
  $( "#results span:last" ).text( event.target.tagName );

  event.preventDefault();
});
</script>

</body>
</html>

이 예제에서 event 는 클릭된 객체(요소)이다. 음 그러니까 클릭 된 요소 의 자식을 kids에 담았다. 위의 소스에 대해서 잘 이해가 안가서 이해를 하고 넘어가려고 크롬 개발자 도구까지 실행하면서 분석해보았다.

첫번째 div 부분을 클릭했을 때 kids의 값은 div 태그의 children() 이 저장된다. div 태그의 children은 p 태그 하나이다. 실제로 클릭해보면 div children가 1개 있다고 한다. 여기에서 find 메서드와 차이가 있는 것인데 만약 find 메서드였으면 p태그를 포함해서 그 아래 span 과 em 태그까지 찾았을 것이다.

<div>
    <p>This <span>is the <em>way</em> we</span>
     write <em>the</em> demo,</p>
</div>

<!--
첫번째 div 부분을 클릭했을 때 kids의 값은 div 태그의 children() 이 저장된다. div 태그의 children은  p 태그 하나이다. 실제로 클릭해보면 div children가 1개 있다고 한다. 여기에서 find 메서드와 차이가 있는 것인데 만약 find 메서드였으면 p태그를 포함해서 그 아래 span 과 em 태그까지 찾았을 것이다.
-->

div 요소의 자식 요소들에 빨간 2줄짜리 밑줄을 그려준다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  span {
    color: blue;
  }
  p {
    margin: 5px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hello (this is a paragraph)</p>

<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>

<div>And One Last <span>Time</span> (most text directly in a div)</div>

<script>
$( "div" ).children().css( "border-bottom", "3px double red" );
</script>

</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  p {
    margin: 5px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>

<script>
$( "div" ).children( ".selected" ).css( "color", "blue" );
</script>

</body>
</html>

아마그래머

정리jQuery

jQuery API 살펴보기 Children 메서드

예제