вызывать дочерние элементы внутри родителя по щелчку внутри родителя

Как вызвать родительский элемент по клику внутри родителя?

Например, у меня есть несколько из них на странице

<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>

Когда я нажимаю .some-btn, я хочу, чтобы это произошло только для этого элемента .parent, где .some-btn является дочерним/нажатым.

Мой jquery сейчас выглядит так

$(".some-btn").click(function() {
    $(".some-text").toggleClass("active",1000,"easeInOutQuad");
    $(".some-image").toggleClass("active",1000,"easeInOutQuad");
    $(".some-btn").toggleClass("active");
})

Но это, конечно, активирует все элементы .parent.


jquery parent onclick toggleclass
person Jens Nielsen    schedule 29.07.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Выберите родительский элемент выбранного элемента, а затем выберите внутри этого элемента:

$(".some-btn").click(function() {
    var that = $(this);
    var par = that.closest('.parent');
    par.find(".some-text").toggleClass("active",1000,"easeInOutQuad");
    par.find(".some-image").toggleClass("active",1000,"easeInOutQuad");
    that.toggleClass("active");
})
person kapantzak    schedule 29.07.2016
comment
Абсолютно красиво, это было именно то, что я искал. Спасибо. - person Jens Nielsen; 29.07.2016

arrow_upward
0
arrow_downward

Вам нужно перейти к ближайшему родительскому div, а затем найти в нем элементы:

$(".some-btn").click(function() {
  var _this = $(this);
  var closestparent = _this.closest('.parent')
  closestparent.find(".some-text,.some-image").toggleClass("active",1000,"easeInOutQuad");
 _this.toggleClass("active");
});


 $(".some-btn").click(function() {
      var _this = $(this);
      var closestparent = _this.closest('.parent')
      closestparent.find(".some-text,.some-image").toggleClass("active",1000,"easeInOutQuad");
      _this.toggleClass("active");
    });
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>

person Milind Anantwar    schedule 29.07.2016