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

Question

I have a HTML structure like the following (relevant part):

<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>

I want to be able to remove the class card-warning from the first card and add it to the second on toggle of a radio button (one in each card).

The code I have so far adds correctly the class to the second card but fails to remove it from the first.

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

$(this) is the selected radio button and .closest('div.card').addClass('card-warning') correctly adds the class as expected. The point is that .prev('div.card').removeClass('card-warning') is not targeting the previous card.

What am I doing wrong?

Answer 1

The closest div.card you're selecting does not have any previous siblings, so the .prev fails. Navigate to the previous element of the parent element instead:

$(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>

If you'll only have one .card-warning in the DOM at any given time, instead of dynamically navigating to parents/siblings etc, just select the one element with .card-warning in the DOM first:

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

Answer 2

I dont know if this what you you search but below snippet, show example

• first add class to closest div card

• then remove class from other div.card except current using

  .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>