JS - next, prev, mouseenter, parent, children, find, siblings, dblclick

• .prev() : 인접 형을 가리킴

• .next() : 인접 동생을 가리킴

• .parent() : 부모를 가리킴

• .children() : 자식을 가리킴

• .find() : 후손을 가리킴

• .siblings() : 형제를 카리림

• .dblclick : 더블클릭시 반응

---

예제1 - if문, has/add/removeClass 사용

$(".box-1 > *").click(function () {
  // $this 변수 생성
  let $this = $(this);

  if ($this.hasClass("active")) {
    $this.removeClass("active");
  } else {
    $this.addClass("active");
  }
});

예제2 - .prev(), .next()

$(".box-1 > *").click(function () {
  let $this = $(this);

  $this.removeClass("active");
  $this.next().addClass("active");
  $this.prev().addClass("active");
});

• 본인은 배경색이 변경되지 않고, 인접 형과 동생만 배경색이 변경된다.

예제3 - mouseenter

• .click을 .mouseenter로 변경하면 마우스만 올려도 배경색이 변한다.

예제4 - 클릭당한 부분 제외 나머지 부분 배경색 변경

예제5 - .parent(), .children()

예제6 - .find()

$this.parent().children().addClass("active");
 $this.parent().find(" > *").addClass("active");

• .children()(자식)과 find(' > *')(후손)은 같은 의미를 가진다.

예제7 - .siblings()

예제8 - .dblclick