Обход DOM для изменения дочернего элемента> дочернего элемента

Question

const $jq = $;

$jq('#section-a li').on('click', function() {
  const el = $jq(this);
  el.addClass("answerPick").siblings(".answer").removeClass("answerPick");
  
  if (el.hasClass("answerPick")) {
    el.children(".circle").addClass("circleVisited").parent(".answer").siblings(".answer").children("circle").removeClass("circleVisited");
  }
});

.answerPick {
  
}

.circleVisited {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-a" class="questions active">
  <fieldset>
    <legend>Is the Gift for a Man or Woman?
      <p>(CHOOSE ONE)</p>
    </legend>
    <ul>
      <li class="answer" data-url="male" data-select="1320072+"><img src="/Images/modules/bluehim_200x.jpg" class="baseimg">
        <p class="qText">Male</p>
        <p class="circle"></p>
      </li>
      <li class="answer" data-url="female" data-select="1320071+"> <img src="/Images/modules/blueher_200x.jpg" class="baseimg">
        <p class="qText">Female</p>
        <p class="circle"></p>
      </li>
    </ul>
  </fieldset>
</div>

Я пытаюсь добавить класс circleVisited к потомку (this) li при щелчке, а точнее к pэлемент с классом круга. Однако только один элемент p может иметь класс circleVisited за раз для каждого раздела.

Если этот li имеет класс answerPick, найдите дочернего элемента этого li с классомcircle и добавьте класс circleVisited. Затем проверьте родительские элементы с классом «answer», проверьте их дочерние элементы с классом circle и удалите класс circleVisited, если он присутствует.

Извинения, если я неясен. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, я боюсь, что упускаю что-то очевидное и делаю это более трудным, чем необходимо.

Answer 1

Вместо добавления .circleAdded к дочерним элементам вы можете создать для него правило, которое учитывает стиль родительского li

  li.answerPick > p.circle {
    /* Whatever you wanted .circle.circleVisited to look like */
  }