jquery-4: Parent/ children

parent

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

section{
  border:10px solid red;
}

section div{
  border:10px solid blue;
  height:50px;
}

$('section div').click(function(){
  let $this = $(this);
  let $section = $this.parent();
  $section.css('border-width', '100px');
})

• $this.parent()는 특정 개체의 한 개의 부모만 담겨져있음
• window.$('section')는 전체의 section태그를 모두 선택함

---

<section>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

<section>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

section{
  border:10px solid red;
}

section> div{
  border:10px solid blue;
}

section div> div{
  border:10px solid gold;
  height:50px
}

$('section').click(function(){
  let $section = $(this);
  $section.children().css('border-color','green');
  $section.find('> div').css('border-color','green');
  
})

• children(): 직계자속
• find()로도 표현 가능
• 맨 하위 div의 부모div색깔 바꾸기