javascript - 遍历 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 的子元素，更具体地说，是具有 Circle 类的 p 元素。但是，每个部分一次只能有一个 p 元素具有类 circleVisited。

如果此 li 具有 answerPick 类，则使用 circle 类查找该 li 的子级> 并添加类circleVisited。然后使用“answer”类检查父元素，使用 circle 类检查其子元素，并删除 circleVisited 类(如果存在)。

如果我不清楚，请道歉。如果您需要更多信息，请告诉我，我担心我遗漏了一些明显的东西，并使这变得比必要的更加困难。

Answer 1

您可以为其创建一条考虑父级 li 样式的规则，而不是向子级添加 .circleAdded

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