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

126

14 августа 2021, 03:10

Помогите разобраться, пожалуйста. Имеем несколько элементов с одинаковым классом. Например, .js-cardPrice. Так: $('.js-cardPrice'); я получу их все сразу. Как обратиться к тому, по которому кликнули?

 var addBasketEL = $('.js-btnBasket');
var selectedContainerEL = $('.js-selectedContainer');
// Cards Content
var cardImageEL = $('.js-cardImage');
var cardCategoryEL = $('.js-cardCategory');
var cardNameEL = $('.js-cardName');
var cardPriceEL = $('.js-cardPrice');
function addSelectedCard(e) {
e.append(`
 <article class="selected-card js-selectedCard">
   <div class="selected-card__image">
     ${cardImageEL.html()}
   </div>
   <div class="selected-card__text">
     <a href="#" class="cards__category">${cardCategoryEL.text()}</a>
     <h2 class="selected-card__name">
        ${cardNameEL.html()}
     </h2>
   </div>
   <span class="price selected-card__price">${cardPriceEL.text()}</span>
   <button class="btn__delete js-btnDelete"></button>
 </article>
 `);
}
// Program Execution
$(function () {
addBasketEL.click(function () {
 if (selectedContainerEL.length) {
   $('.js-selectedCard').remove();
   $('button').removeClass('active');
   addSelectedCard(selectedContainerEL);
   $(this).addClass('active');
 } else {
   addSelectedCard(selectedContainerEL);
   $(this).addClass('active');
 }
 $('.js-btnDelete').click(function () {
   $(this).parent().remove();
 });
});
});

Ссылка на codepen:

Answer 1

В обработчике, допустим как у нас $().on('click'), $(this) - это тот самый элемент, в котором сработал обработчик.
Т.е., конкретно в этом примере, это тот, на который кликнули.

$('.js-cardPrice').on('click', function(){       
  $(this).toggleClass('toggle'); 
  let index = $(this).index(); 
  console.info(`Вы нажали на ${index}й элемент`); 
});

.js-cardPrice { 
  display: inline-block; 
  width: 50px; 
  height: 50px; 
  border: 1px solid #555; 
  cursor: pointer; 
} 
 
.js-cardPrice.toggle { 
  background: green; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div class="js-cardPrice"></div> 
<div class="js-cardPrice"></div> 
<div class="js-cardPrice"></div> 
<div class="js-cardPrice"></div> 
<div class="js-cardPrice"></div> 
<div class="js-cardPrice"></div>

..а мне нужно обратиться к элементам карточки, в которой она находится..

Для этого используйте, например .closest()

$('.js-cardPrice').on('click', function() { 
  let level = $(this).closest('.level'), 
      indexLevel = level.index(), 
      indexCard = $(this).index()+1; 
       
  level.toggleClass('toggle'); 
       
  console.info(`Вы нажали на ${indexCard}й элемент, ${indexLevel}го уровня`); 
});

.level { 
  font-size: 0; 
  display: block; 
  width: 110px; 
  padding: 5px; 
  margin-bottom: 5px; 
} 
 
.js-cardPrice { 
  display: inline-block; 
  width: 50px; 
  height: 50px; 
  border: 1px solid #555; 
  background: #fff; 
  cursor: pointer; 
} 
 
.js-cardPrice:nth-child(1) { 
  margin-right: 5px; 
} 
 
.level.toggle { 
  background: green; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div class="level"> 
  <div class="js-cardPrice"></div> 
  <div class="js-cardPrice"></div> 
</div> 
<div class="level"> 
  <div class="js-cardPrice"></div> 
  <div class="js-cardPrice"></div> 
</div> 
<div class="level"> 
  <div class="js-cardPrice"></div> 
  <div class="js-cardPrice"></div> 
</div>

Answer 2

Короче, всего-то навсего нужно было спокойно и без суеты пройти по дому в нужном направлении, типа так: ${$(this).parent().parent().parent().find(cardNameEL).text()}, ну и причесать это все в переменные, конечно. Благодарю всех, кто откликнулся!