javascript - 在 html() 之前删除Class

Question

我有一个有两个类的变量。我想在 html() 将 div 推送到 DOM 之前删除 small 类。

截至目前，div 正在使用 small 类进行渲染。我希望将其删除。

我尝试切换 removeClass 的顺序，将其放置在 html() 之前，但这不起作用。

$('#review').removeClass('small').html(prev);

有人知道我该怎么做吗？

var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).removeClass('small');

.big {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>

更新

为了简单起见，我试图让我的问题变得非常基本，但事实证明，我在实际代码中拥有的数组使这个问题变得更加复杂。

$('body').on('change', '.option-check', function() {
  var calSelectionImg = [];
  $('.calendar-check:checked').each(function() {
    calSelectionImg.push($(this).data('calendar-img'));
  });
  $('#pg-img-review').html(calSelectionImg);
});

.cal-selected-img {
  color: red;
  font-size: 2rem;
}

.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">

<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Goodbye</div>">

<div id="pg-img-review" class="margin15"></div>

Answer 1

您正在修改#review，而不是新代码。因此，我添加了 appendTo。这是一次较小的重组，但它以最小的复杂性解决了问题。

var prev = "<div class='big small'>Hello</div>";
$(prev).removeClass('small').appendTo("#review");

.big {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>