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

Question

[Iliya V. Soldatkin]

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

Код здесь: https://codepen.io/iliyasold/pen/GRKLdMW

Comments

[poniyur]

У вас в вашем же коде есть пример, где идёт работа с элементом, на который кликнули.

[Iliya V. Soldatkin]

poniyur, да. Но, мне нужно получить данные не из того элемента, по которому кликнули, а из элемента выше.

[poniyur]

Iliya V. Soldatkin,

Как обратиться к тому, по которому кликнули?

:D

Answer 1

[Eugene Chefranov]

<ul>
  <li class="js-cardPrice">Hello world</li>
  <li class="js-cardPrice">Hello universe</li>
  <li class="js-cardPrice">Hello Iliya</li>
</ul>

$(".js-cardPrice").on("click", function() {
    var a = $(this).text(); // например, получим текст текущего элемента
    console.log(a);
    alert(a);
});

Comments

[Iliya V. Soldatkin]

Ок, спасибо!

[Iliya V. Soldatkin]

Евгений, а, как быть, если клик по кнопке происходит, не по элементу?

[Iliya V. Soldatkin]

То есть, вот здесь:

$(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();
    });
  });
});

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

[Eugene Chefranov]

Iliya V. Soldatkin, если правильно понял

$(function() {
  addBasketEL.click(function() {
    if (selectedContainerEL.length) {
      $(this + " .js-selectedCard").remove();

      $("button").removeClass("active");

      addSelectedCard(selectedContainerEL);

      $(this).addClass("active");
    } else {
      addSelectedCard(selectedContainerEL);

      $(this).addClass("active");
    }

    $(".js-btnDelete").click(function() {
      $(this)
        .parent()
        .remove();
    });
  });
});

[Iliya V. Soldatkin]

Eugene Chefranov, не совсем, точнее, м.б. я не так объясняю)

Вот мой jQ-код:

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();
    });
  });
});

И вот тут, когда я обращаюсь, допустим: к ${cardImageEL.html()} чтобы получить html-содержимое, получаю все cardImageEL, а мне нужно только содержимое конкретной карточки, по кнопке которой кликнули. Как это сделать?

[Iliya V. Soldatkin]

Пробовал так: ${$(this).find(cardImageEL).html()} - получаю undefined ..((

[Iliya V. Soldatkin]

Что я тут не догоняю?)

[Eugene Chefranov]

И вот тут, когда я обращаюсь, допустим: к ${cardImageEL.html()} чтобы получить html-содержимое, получаю все cardImageEL, а мне нужно только содержимое конкретной карточки, по кнопке которой кликнули. Как это сделать?

наверно так ${this.html()}

Answer 2

[Iliya V. Soldatkin]

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

Comments

[alex-1917]

зачем?))