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/

P.S。我想可以先删除不需要的元素，然后添加新元素，但也许有更简单的方法？

Answer 1

要解决您的问题，您可以使用 child select 或 :nth-child(n) 按顺序到 select 个特定元素像这样

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 2

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

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

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

jQuery: replace elements with other elements?

html

javascript

jquery

replacewith