Есть ли какой-либо метод или процедура, чтобы запретить jQuery применять все те же классы, кроме текущего класса?

Question

У меня есть ситуация для применения некоторого jQuery к текущему классу, который не должен применяться к остальным классам с одинаковыми именами. Я хочу применить код jQuery для применения к первому div "img_click", но не к следующему "img_click". Ниже приведен пример кода:

    <div>    
      <div class="img_click">
        <img src="image1.jpg" />
      </div>
      <div class="info">
        <h2>Image Heading</h2>
        <div>Posted on..</div>
      </div>
    </div>
    <div>    
      <div class="img_click">
        <img src="image2.jpg" />
      </div>
      <div class="info">
        <h2>Image Heading</h2>
        <div>Posted on..</div>
      </div>
  </div>

Answer 1

Вы можете сделать с .find ():

$('h2').click(function(){
        var $this = $(this);
    $this.closest('.main-class').find('.img_click').css( "border-color", "red" );

    });



.img_click{
  height:200px;
  width: 200px;
  border: 1px solid black;
}



<div class="main-class">
  <div class="img_click">
   <img src="image1.jpg" /> 
  </div>
  <div class="info">
    <h2>Image Heading</h2>
    <div>Posted on..</div>
  </div>
</div>
<div class="main-class">
  <div class="img_click">
   <img src="image2.jpg" />
  </div>
  <div class="info">
    <h2 >Image Heading</h2>
    <div>Posted on..</div>
  </div>
</div>

Answer 2

Редактировать :

Как вы сказали Если вы щелкнете по n-му классу img_click, то только n-тый информационный класс должен быть slideDown. Следовательно, следуйте этому пути:

$( "div.img_click" ).click(function (){$(this).next().slideDown();$(".info").not($(this).next()).css("display","none");});

.info{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="img_click">
    <img src="image1.jpg" />
  </div>
  <div class="info">
    <h2>Image Heading 1</h2>
    <div>Posted on.. </div>
  </div>
</div>
<div>
  <div class="img_click">
    <img src="image2.jpg" />
  </div>
  <div class="info">
    <h2>Image Heading 2</h2>
    <div>Posted on.. </div>
  </div>
</div>

Если вы не хотите скрывать предыдущий info div, просто remove : $(".info").not($(this).next()).css("display","none")