缺少针对遍历 dom 的正确元素

Question

我的 HTML 结构如下（相关部分）：

<div class="col-md-6">
    <div class="card card-warning">something here</div>
</div>
<div class="col-md-6">
    <div class="card">something else here</div>
</div>

我希望能够从第一张卡片中删除 card-warning 类，并将其添加到第二张单选按钮的切换按钮（每张卡片中）。

到目前为止，我的代码将类正确添加到第二张卡，但未能从第一张卡中删除。

$(this).closest('div.card').addClass('card-warning').prev('div.card').removeClass('card-warning');

$(this) 是选中的单选按钮，.closest('div.card').addClass('card-warning') 按预期正确添加了类。关键是.prev('div.card').removeClass('card-warning') 不是针对前一张卡的。

我做错了什么？

Answer 1

您选择的最接近的div.card 没有任何先前的兄弟姐妹，因此.prev 失败。改为导航到 parent 元素的上一个元素：

$(this)
  .closest('div.card')
  .addClass('card-warning')
  .parent()
  .prev()
  .children('div.card')
  .removeClass('card-warning');

$('#foo').on('click', function() {
  $(this)
    .closest('div.card')
    .addClass('card-warning')
    .parent()
    .prev()
    .children('div.card')
    .removeClass('card-warning');
});

.card-warning {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
    <div class="card card-warning">something here</div>
</div>
<div class="col-md-6">
    <div class="card" id="foo">something else here</div>
</div>

如果您在任何给定时间在 DOM 中只有一个 .card-warning，而不是动态导航到父母/兄弟姐妹等，只需首先在 DOM 中选择一个带有 .card-warning 的元素：

$('.card-warning').removeClass('card-warning');
$(this)
  .closest('div.card')
  .addClass('card-warning');

Answer 2

我不知道这是否是您搜索的内容，但在 sn-p 下方显示示例

• 首先将类添加到最近的 div 卡

• 然后从除当前使用的其他 div.card 中删除类

  .parents('.row').find('div.card').not($(this).parents('div.card'))

$(function() {

  $(".apply").on("click", function() {
    $(this).closest('div.card').addClass('card-warning').parents('.row').find('div.card').not($(this).parents('div.card')).removeClass("card-warning");

  })

})

.apply {
  margin-left:20px;
  color: red;
}

.card-warning {
  background-color: yellow !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  
  <div class="row">
    <div class="col-md-6">
      <div class="card card-warning">something here <input name="apply" class="apply" type="radio"/></div>
    </div>
    <div class="col-md-6">
      <div class="card">something else here <input name="apply" class="apply" type="radio"/></div>
    </div>

  </div>
  

</div>