Применять «this» к определенным c родителям другого ребенка, используя Jquery?

Question

У меня есть этот базовый c макет. Где, если вы нажмете «узнать больше», он должен показать больше текста описания в поле, добавив класс, который изменяет его свойство отображения.

Однако обычно я буду использовать фрагменты «ближайший» или «этот», если это прямой дочерний элемент кликабельного элемента, но у меня возникают проблемы с нахождением этого элемента в домене.

Как я могу заставить каждую кнопку «узнать больше» открывать правильный текст под ней, не открывая другие / все сразу?

Я не могу изменить разметку html .

Спасибо!

$(function() {
    $('.learn-more-btn').click(function() {
        $('.item-learn-more-popup').toggleClass("active");
    });
});

.item-learn-more-popup {
    display:none;
}
.item-learn-more-popup.active{
  display:block;
}







.items-and-stuffs {
  display:flex;
  flex-wrap:wrap;
}
.item {
  padding:40px;
  margin:10px;
  width: calc(33.33% - 100px);
  background:#e4e4e4;
}
h2{
  margin-top:0;
  margin-block-start: 0;
}

a.learn-more-btn {
    border: 1px solid gray;
    background: gray;
    color: white;
    padding: 10px 13px;
    display: block;
    text-align: center;
    max-width: 88px;
    pointer:cursor;
    border-radius:90px;
    cursor:pointer;
}
.item-learn-more-popup {
    margin-top: 17px;
}
@media only screen and (max-width: 950px) {
  .item {
    padding:40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding:40px;
    width: calc(100% - 100px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
<div class="item">
   <div class="item-content">
     <div><h2>Item 1</h2></div> 
     <div><p>This is item one... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item one... This is more info about item one. Where we      go into more details about this item
   </div> 
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 2</h2></div> 
     <div><p>This is item two... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item two... This is more info about item two. Where we      go into more details about this item
   </div>
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 3</h2></div> 
     <div><p>This is item three... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item three... This is more info about item three. Where      we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 4</h2></div> 
     <div><p>This is item four... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item four... This is more info about item four. Where        we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 5</h2></div> 
     <div><p>This is item five... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item five... This is more info about item five. Where        we go into more details about this item
   </div> 
 </div>
                
</div>

Answer 1

Попробуйте использовать find() с closest()

closest ()

1. Начинается с текущего элемента
2. Путешествует вверх по Дерево DOM, пока не будет найдено соответствие для предоставленного селектора
3. Возвращенный объект jQuery содержит ноль или один элемент для каждого элемента в исходном наборе в порядке документа

$('.learn-more-btn').click(function() {
  $(this).closest('.item').find('.item-learn-more-popup').toggleClass("active");
});

.item-learn-more-popup {
  display: none;
}

.item-learn-more-popup.active {
  display: block;
}

.items-and-stuffs {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 40px;
  margin: 10px;
  width: calc(33.33% - 100px);
  background: #e4e4e4;
}

h2 {
  margin-top: 0;
  margin-block-start: 0;
}

a.learn-more-btn {
  border: 1px solid gray;
  background: gray;
  color: white;
  padding: 10px 13px;
  display: block;
  text-align: center;
  max-width: 88px;
  pointer: cursor;
  border-radius: 90px;
  cursor: pointer;
}

.item-learn-more-popup {
  margin-top: 17px;
}

@media only screen and (max-width: 950px) {
  .item {
    padding: 40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding: 40px;
    width: calc(100% - 100px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 1</h2>
      </div>
      <div>
        <p>This is item one... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item one... This is more info about item one. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 2</h2>
      </div>
      <div>
        <p>This is item two... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item two... This is more info about item two. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 3</h2>
      </div>
      <div>
        <p>This is item three... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item three... This is more info about item three. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 4</h2>
      </div>
      <div>
        <p>This is item four... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item four... This is more info about item four. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 5</h2>
      </div>
      <div>
        <p>This is item five... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item five... This is more info about item five. Where we go into more details about this item
    </div>
  </div>

</div>

Answer 2

Проблема здесь в том, что вы выбираете все экземпляры .item-learn-more-popup. Если вы хотите выбрать только ближайший экземпляр всплывающего окна, вам нужно go поднять DOM, а затем вернуться назад. Вы можете сделать это с помощью селектора parents() (примененного к элементу, по которому щелкнули) и go до общего родителя. Оттуда вам нужно go вниз по дереву и найти всплывающее окно.

$('.learn-more-btn').click(function() {
    $(this).parents('.item').find('.item-learn-more-popup').toggleClass('active');
});

А вот ваш адаптированный пример:

$(function() {
    $('.learn-more-btn').click(function() {
        $(this).parents('.item').find('.item-learn-more-popup').toggleClass('active');
    });
});

.item-learn-more-popup {
    display:none;
}
.item-learn-more-popup.active{
  display:block;
}

.items-and-stuffs {
  display:flex;
  flex-wrap:wrap;
}
.item {
  padding:40px;
  margin:10px;
  width: calc(33.33% - 100px);
  background:#e4e4e4;
}
h2{
  margin-top:0;
  margin-block-start: 0;
}

a.learn-more-btn {
    border: 1px solid gray;
    background: gray;
    color: white;
    padding: 10px 13px;
    display: block;
    text-align: center;
    max-width: 88px;
    pointer:cursor;
    border-radius:90px;
    cursor:pointer;
}
.item-learn-more-popup {
    margin-top: 17px;
}
@media only screen and (max-width: 950px) {
  .item {
    padding:40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding:40px;
    width: calc(100% - 100px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
<div class="item">
   <div class="item-content">
     <div><h2>Item 1</h2></div> 
     <div><p>This is item one... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item one... This is more info about item one. Where we      go into more details about this item
   </div> 
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 2</h2></div> 
     <div><p>This is item two... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item two... This is more info about item two. Where we      go into more details about this item
   </div>
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 3</h2></div> 
     <div><p>This is item three... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item three... This is more info about item three. Where      we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 4</h2></div> 
     <div><p>This is item four... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item four... This is more info about item four. Where        we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 5</h2></div> 
     <div><p>This is item five... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item five... This is more info about item five. Where        we go into more details about this item
   </div> 
 </div>
                
</div>