Найти класс внутри родительского элемента, по которому щелкнули - PullRequest
Новая
       2

Найти класс внутри родительского элемента, по которому щелкнули

1 голос
/ 15 января 2012

Я пытаюсь найти класс .post-info внутри родительского элемента, по которому щелкают, .toggle-info. Прямо сейчас все .post-info на странице переключаются. Я пытаюсь получить только одну .post-info для переключения внутри родительского контейнера .post. 

<div class="post">
 <div class="toggle-info">Toggle Btn</div>

 <div class="post-info">
  <p>Toggle this content</p>
 </div>

</div>


$(".toggle-info").click(function () {   
  $(".post-info").animate({ 
    height: "toggle",
    opacity:"toggle"
  }, 520, 'swing');
});

Заранее спасибо за помощь!

1 Ответ

5 голосов
/ 15 января 2012

Вы можете сделать это так: 

$(this).closest(".post").find(".post-info").animate(...)

Это идет вверх по родительской цепочке, откуда происходит щелчок, и находит класс .post, затем находит .post-info в этом родительском элементе и затем применяет к нему анимацию. Это очень гибко в том смысле, что .post-info может быть где угодно в родительском .post, и это будет работать. Вы можете увидеть его здесь: http://jsfiddle.net/jfriend00/AeYZU/

Для этого конкретного точного HTML вы также можете использовать это: 

$(this).next().animate(...)

Это получит следующего брата после div, на который кликнули. Обратите внимание, что этот метод (в отличие от предыдущего) основан на точной позиции .post-info в качестве следующего родного брата и сломается, если его позиция изменится. Вы можете увидеть эту работу здесь: http://jsfiddle.net/jfriend00/qGCLx/

...