[jQuery]サブノードをインポートします.児童科find()の違い

8178 ワード

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() 메소드 비교|작성자 까미유

하세요