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

Posted 2023-05-09

【中文标题】缺少针对遍历 dom 的正确元素

【英文标题】：missing to target the correct element traversing up the dom

【发布时间】：2021-05-15 08:19:20

【问题描述】：

我的 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') 不是针对前一张卡的。

我做错了什么？

【问题讨论】：

你能贴出带有收音机的html结构来试试sn-p

【参考方案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');

【讨论】：

如果我想从第一个切换到第二个而不是返回（显然），它可以工作。既然它应该在两个内容之间切换，有没有办法让.parent().prev() 通常找到具有此类的“其他”div？

【参考方案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>

【讨论】：

这是我一直在寻找的通用目的。在这种情况下，由于此类只能有一个 div，因此我在另一个答案中使用了解决方法

@LelioFaieta ，好极了 :)