Jquery $ (this) 자식 선택기

Jquery $ (this) 자식 선택기

---

나는 이것을 사용하고있다 :

jQuery('.class1 a').click( function() {
  if ($(".class2").is(":hidden")) {
    $(".class2").slideDown("slow");
  } else {
    $(".class2").slideUp();
  }
});

페이지 구조 :

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

다음과 같은 여러 class1 / class2 세트가 없을 때만 작동합니다.

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

클릭 한 class1 아래의 class2에만 영향을 미치도록 초기 jquery 코드를 어떻게 변경합니까? $ (this) 선택기의 자식을 얻는 방법에서 권장 사항을 시도했습니다 . 그러나 성공하지 못했습니다.

---

HTML을 사용하는 가장 좋은 방법은 다음 next과 같이 함수 를 사용하는 것입니다 .

var div = $(this).next('.class2');

클릭 핸들러가에서 발생 <a>하므로 상위 DIV까지 탐색 한 다음 두 번째 DIV를 검색 할 수도 있습니다. parent및 의 조합으로이 작업을 수행합니다 children. 이 접근 방식은 작성한 HTML이 정확히 일치하지 않고 두 번째 DIV가 링크와 관련된 다른 위치에있을 수있는 경우 가장 좋습니다.

var div = $(this).parent().children('.class2');

"검색"이 직계 자식으로 제한되지 않도록하려면 위의 예에서 find대신 사용 합니다 children.

또한 가능하면 항상 태그 이름을 클래스 선택기 앞에 추가하는 것이 가장 좋습니다. 즉, <div>태그 에만 해당 클래스가있을 경우 선택기를 div.class1, div.class2.

---

클릭 이벤트에서 "this"는 클릭 된 태그입니다.

jQuery('.class1 a').click( function() {
   var divToSlide = $(this).parent().find(".class2");
   if (divToSlide.is(":hidden")) {
      divToSlide.slideDown("slow");
   } else {
      divToSlide.slideUp();
   }
});

.siblings, .next 등을 사용할 수도 있지만 div에 도달하는 방법에는 여러 가지가 있습니다.

---

.slideToggle () 사용하면 훨씬 간단합니다 .

jQuery('.class1 a').click( function() {
  $(this).next('.class2').slideToggle();
});

편집 : .siblings 대신 .next로 만들었습니다.

http://www.mredesign.com/demos/jquery-effects-1/

현재 위치를 기억하기 위해 쿠키를 추가 할 수도 있습니다.

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/

---

http://jqapi.com/ Traversing--> Tree Traversal --> Children

참고URL : https://stackoverflow.com/questions/841553/jquery-this-child-selector