jQuery：用其他元素替换元素？

Question

有没有一种简单的方法可以用其他元素替换所选元素？

我认为replaceWith会这样做，但它实际上用提供的元素替换每一个事件。所以在我的情况下，它实际上复制了元素（因为它适用于每次出现）。

考虑这个例子：

var html = '<option value="8">15% Discount</option><option value="9">18% Discount</option>'
$('.discount_select option:not(:first)').replaceWith(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="discount_select">
  <option value="0"></option>
  <option value="4">45% Discount</option>
  <option value="5">10% Discount</option>
</select>

结果是重复了新选项。我得到两个15%和两个18%选项。但我需要用提供的选项替换所选的选项（而不是逐个为每个选项执行此操作）。

你可以在这里看到：https://jsfiddle.net/6on7mzqw/

附：我想有可能首先删除不需要的元素，然后添加新元素，但也许有更简单的方法？

Answer 1

在选择第一个内容之前放置HTML中的新内容，然后返回原始选择并删除它们。

var html = '<option value="8">15% Discount</option><option value="9">18% Discount</option>'
$('.discount_select option:not(:first)')
.first().before(html).end().remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="discount_select">
  <option value="0"></option>
  <option value="4">45% Discount</option>
  <option value="5">10% Discount</option>
</select>

Answer 2

看起来jQuery中没有处理这种特定情况的方法，所以我们可以删除并添加新元素。

var html = '<option value="8">15% Discount</option><option value="9">18% Discount</option>'

$('.discount_select option:not(:first)').remove();
$('.discount_select option:first').after(html);

Answer 3

要解决您的问题，您可以使用子选择器：nth-​​child（n）按顺序选择特定元素

var html = '<option value="8">15% Discount</option><option value="9">18% Discount</option>'

$('.discount_select option:nth-child(2)').replaceWith(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="discount_select">
  <option value="0"></option>
  <option value="4">45% Discount</option>
  <option value="5">10% Discount</option>
</select>

你的问题有很多解决方案，其中之一

Answer 4

您最好删除不必要的选项并一次性添加新选项。下面的解决方案在一个操作中实现了这一点，这意味着只重写一次DOM，这在速度方面被认为是一种很好的做法。

var html = '<option value="8">15% Discount</option><option value="9">18% Discount</option>';
$('.discount_select').html(
    $('.discount_select option').first().add(html)
);