Добавление класса, когда определенный класс существует во вложенном элементе

Question

Итак, у меня есть HTML, как показано ниже. Вы заметите, что есть два комплекта. Я хотел бы использовать jQuery, чтобы добавить класс "free" в div wpem-single-event-widget, когда класс "free" существует на самом вложенном уровне.

В идеале первый div должен быть:

<div class="wpem-main wpem-single-event-widget free">

Возможно ли это?

<div class="wpem-main wpem-single-event-widget">
  <a href="URL">
    <div class="wpem-event-banner">
      <div class="wpem-event-banner-img"><img src="URL" alt="A Thing" scale="0"></div>
      </div>
      <div class="wpem-event-infomation">
         <div class="wpem-event-details">
           <div class="wpem-event-type">
             <span class="wpem-event-type-text event-type **free** ">Free</span>                
           </div>                 
         </div>
      </div>
    </a>
</div>

<div class="wpem-main wpem-single-event-widget">
  <a href="URL2">
    <div class="wpem-event-banner">
      <div class="wpem-event-banner-img"><img src="URL" alt="A Thing 2" scale="0"></div>
      </div>
      <div class="wpem-event-infomation">
         <div class="wpem-event-details">
           <div class="wpem-event-type">
             <span class="wpem-event-type-text event-type">Not Free</span>              
           </div>                 
         </div>
      </div>
    </a>
</div>

Answer 1

Используйте модификатор селектора :has(), чтобы проверить, есть ли в нем что-то.

$(".wpem-single-event-widget:has(.free)").addClass("free");

div.free {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpem-main wpem-single-event-widget">
  <a href="URL">
    <div class="wpem-event-banner">
      <div class="wpem-event-banner-img"><img src="URL" alt="A Thing" scale="0"></div>
    </div>
    <div class="wpem-event-infomation">
      <div class="wpem-event-details">
        <div class="wpem-event-type">
          <span class="wpem-event-type-text event-type free">Free</span>
        </div>
      </div>
    </div>
  </a>
</div>

<div class="wpem-main wpem-single-event-widget">
  <a href="URL2">
    <div class="wpem-event-banner">
      <div class="wpem-event-banner-img"><img src="URL" alt="A Thing 2" scale="0"></div>
    </div>
    <div class="wpem-event-infomation">
      <div class="wpem-event-details">
        <div class="wpem-event-type">
          <span class="wpem-event-type-text event-type">Not Free</span>
        </div>
      </div>
    </div>
  </a>
</div>