Question

是否有一种简单的方法可以将所选元素替换为其他元素？

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

考虑这个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以在此处查看：https://jsfiddle.net/6on7mzqw/

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

Answer 1

看起来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 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

您的问题有很多解决方案，其中一个

Answer 3

在选择第一个内容之前，先从HTML中添加新内容，然后返回原始选择并将其删除。

＆＃13;

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

＆＃13;

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

＆＃13;

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：用其他元素替换元素？

4 个答案: