Почему не срабатывает js код через this?

Question

[kerptwotwo]

Мне нужно спрятать "promocode-more", если нет текста в "promocode-more__text", классы повторяются, поэтому мне нужно обратиться к конкретному "promocode-more", что у меня не получается, пробовал по разному. Можете подсказать, в чём ошибка?

<div class="promocodes-text">
            <div>
                <p class="promocode-text__title">
                    <span>-150 рублей</span> на весь ассортимент
                    <br>по промокоду.
                </p>
                <p class="promocode-text__description">
                    Скидка
                    <span class="promocode-more">
                        ...
                    </span>
                    <!-- В promocode-more__text писать текст, который будет прятаться на мобильном -->
                    <span class="promocode-more__text">
                        Приобретите на сумму от 3500р. c приятной скидкой. 
                    </span>
                </p>
            </div>
        </div>

$(document).ready(function () {

        $(".promocode-text__description").ready(function () {
            var that = '';
            if ($(".promocode-text__description").children(".promocode-more__text").is(':empty')) {
                that = 1;
            } else {
                console.log('Не пустой');
            }
            if (that == 1) {
                console.log('Работает');
                $(this).children(".promocode-more").addClass("hides");
            }
        });

        $(".promocode-text__description").click(function () {
            if ($(window).width() < 575) {
                $(this).children(".promocode-more__text").toggleClass("expand");
                $(this).children(".promocode-more").toggleClass("hides");
            }
        });
    });

Comments

[Вадим]

А Вы смотрели на что this ссылается тут

$(this).children(".promocode-more").addClass("hides");

?

Ну и само использование ready на элементе - что-то не то.
https://api.jquery.com/ready/

[kerptwotwo]

Вадим, да, похоже ссылается на document, а как обратиться к нужному элементу можете подсказать? Не смог сам найти

[Вадим]

$(document).ready(function () {
// перебиваем все promocode-more__text
        $(".promocode-more__text").each(function (index, element) {
            var that = '';
// проверяем для каждого на пустоту
            if ($(element).is(':empty')) {
                that = 1;
            } else {
                console.log('Не пустой');
            }
            if (that == 1) {
                console.log('Работает');
// если выполнилось условие - идём вверх по дереву до ближайшего .promocode-more и добавляем ему класс
                $(element).closest(".promocode-more").addClass("hides");
            }
        });

        $(".promocode-text__description").click(function () {
            if ($(window).width() < 575) {
                $(this).children(".promocode-more__text").toggleClass("expand");
                $(this).children(".promocode-more").toggleClass("hides");
            }
        });

[kerptwotwo]

Вадим, спасибо за решение и объяснение

Answer 1

[Сергей delphinpro]

$('.promocodes-text').each(function(){
  const $desc = $('.promocode-text__description', this);
  const $text = $('.promocode-more__text', this);
  const $more = $('.promocode-more', this);
  
  if ($text.is(':empty')) {
    $more.addClass("hides");
  }

  $desc.click(function () {
    if ($(window).width() < 575) {
      $text.toggleClass("expand");
      $more.toggleClass("hides");
    }
  });
});