Jquery $(이) 하위 선택기

Jquery $(이) 하위 선택기

이걸 사용하고 있습니다.

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 코드를 어떻게 변경합니까?$(이) 선택자의 자녀를 얻는 방법을 추천해 보았습니다.성공하지 못했습니다

HTML을 사용하는 가장 좋은 방법은 아마도 다음과 같은 기능을 사용하는 것일 것입니다.

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

클릭 핸들러가 에 발생하기 때문에<a>, 상위 DIV까지 횡단한 다음 두 번째 DIV를 검색할 수도 있습니다.와 의 조합으로 이 작업을 수행할 수.게시한 HTML이 정확히 그렇지 않고 두 번째 DIV가 링크와 관련된 다른 위치에 있을 수 있는 경우 이 접근 방식이 가장 좋습니다.

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

"검색"이 직계 자녀에게 국한되지 않기를 원하는 경우 다음 대신 사용할 수 있습니다.children위의 예에서

또한 가능한 경우 클래스 선택자 앞에 태그 이름을 붙이는 것이 가장 좋습니다.예를 들면, 만일<div>태그들은 그 클래스들을 가질 것이고, 선택자를div.class1,div.class2.

클릭 이벤트에서 "이것"은 클릭된 태그입니다.

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

디브에 갈 수 있는 방법은 여러 가지가 있지만 .sibles, .next 등을 사용할 수도 있습니다.

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

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

EDIT: .sibles 대신 .next로 만들었습니다.

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

쿠키를 추가해서 지금의 위치를 기억할 수도 있습니다...

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

http://jqapi.com/ 횡단 --> 트리 횡단 --> 어린이

언급URL : https://stackoverflow.com/questions/841553/jquery-this-child-selector