Как выбрать следующий div?

Question

Я знаю, что этот вопрос был исправлен много раз, но я не нашел ответа на свой случай.

Я показываю некоторые DIV, как это:

<div class="product-infos-pm">
  <form action="/panier.html" method="post">
    <table>
      <tr>
        <td align="right">
          <input type="hidden" value="160" name="qteColis" class=" ">
          <input type="hidden" value="2.4" name="prixColis" class=" ">
          <input type="hidden" value="2.9" name="prixUni" class=" ">
        </td>
      </tr>
    </table>
    <span class="product-infos-tarif">Click here
      <span class="plus-ou-moins">
        <img class="toggle-tarif" src="arrow_small_down.png" alt="minus">
      </span>
    </span>
    <div style="display: none" class="detail-prix">
      <table class="info-prix">
        <tr>
          <td><span class="nbColis"></span></td>
          <td><span class="qteColis"></span></td>
          <td><span class="prixColis"></span> €</td>
          <td><span class="prixTotColis"></span> €</td>
        </tr>
    </div>
  </form>
</div>

<div class="product-infos-pm">
  <form action="/panier.html" method="post">
    <table>
      <tr>
        <td align="right">
          <input type="hidden" value="60" name="qteColis" class=" ">
          <input type="hidden" value="3.2" name="prixColis" class=" ">
          <input type="hidden" value="4.7" name="prixUni" class=" ">
        </td>
      </tr>
    </table>
    <span class="product-infos-tarif">Click here
      <span class="plus-ou-moins">
        <img class="toggle-tarif" src="arrow_small_down.png" alt="minus">
      </span>
    </span>
    <div style="display: none" class="detail-prix">
      <table class="info-prix">
        <tr>
          <td><span class="nbColis"></span></td>
          <td><span class="qteColis"></span></td>
          <td><span class="prixColis"></span> €</td>
          <td><span class="prixTotColis"></span> €</td>
        </tr>
    </div>
  </form>
</div>

И у меня есть это событие:

    $('.plus-ou-moins').click(function() {
      $('.detail-prix').slideToggle('slow', function(){
        var img = $('.toggle-tarif');
        var etat = img.attr('alt');
      });

    });

И когда я нажимаю на .toggle-tarif img, все .detail-prix DIV скользят.

Как сделать только слайдхороший div?

Answer 1

Вы хотите изменить свой код на:

 $('.plus-ou-moins').click(function() {
      $(this).parent(".product-infos-pm").find(".detail-prix").slideToggle('slow', function(){
        var img = $('.toggle-tarif');
        var etat = img.attr('alt');
      });

    });

Answer 2

Используйте parent().next(), чтобы достичь этого div:

Вместо:

$('.detail-prix')

Используйте:

$(this).parent('span').next('.detail-prix')

Так вот как должен выглядеть ваш код:

$('.plus-ou-moins').click(function() {
  $(this).parent('span').next('.detail-prix').slideToggle('slow', function(){
    var img = $('.toggle-tarif');
    var etat = img.attr('alt');
  });
});