запрос выберите элемент, который не нажимается, чтобы увеличить его ширину

Question

Таким образом, у меня есть структура типа двух блоков, смежных друг с другом, я хочу анимировать блок, на котором я щелкнул, и увеличить его ширину, в то время как другой блок должен просто переместиться вправо, когда происходят эти переходы

<div class="col-md-6 mb-4 mt-5">
  <a href="project1.html" class="active hovereffect">
   <div class="overlay">
     <h2 class="title">Projects 1</h2>
   </div>
   </a>
 </div>

 <div class="col-md-6 mb-4 mt-5">
   <a href="project2.html" class="hovereffect">
     <div class="overlay">
        <h2 class="title">Projects 2</h2>
     </div>
    </a>
 </div>

Элемент div, на который я нажал, должен увеличить ширину, а другие должны просто скользить

   $(lastElementClicked).animate({width:900})

// Я хочу, чтобы это работало, чтобы выбрать элемент div, на который не нажимали

   var a = $(lastElementClicked).find('col-md-6:not(:click)');
   $(a).animate(slideleft)

Любая идея, как я могу запросить выбрать div, который не нажал.

Answer 1

Вы также можете использовать .siblings() метод, как предложил LGSon , но если вы хотите достичь этого по-своему, то следующее иллюстрирует возможный способ.

var notClicked = null;

$('.col-md-6').on('click', function() {
  $('.col-md-6').each((index, value) => {
    if(value !== this) notClicked = value;
  });
  
  console.log($(notClicked).text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 mb-4 mt-5">
  <a href="#" class="active hovereffect">
    <div class="overlay">
      <h2 class="title">Projects 1</h2>
    </div>
  </a>
</div>

<div class="col-md-6 mb-4 mt-5">
  <a href="#" class="hovereffect">
    <div class="overlay">
      <h2 class="title">Projects 2</h2>
    </div>
  </a>
</div>