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>

結果は、新たなオプションが重複しているということです。私は2つの15%と2つの18%オプションを取得します。しかし、私は選択されたオプションを指定されたオプションに置き換える必要があります（オプションごとにこれを行うのではなく）。

あなたはここでそれを見ることができます：https://jsfiddle.net/6on7mzqw/

P.S.を私はそれが最初に不要な要素を削除し、新しい要素を追加することは可能だと思いますが、多分簡単な方法がありますか？

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

あなたは子セレクタ使用することができ、あなたの問題を解決するには、次のような順序 によって は、特定の要素を選択するために、n番目の子（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>

のための多くのソリューションがありますあなたの問題とそれらのうちの1つ

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

不要なオプションを削除し、新しいオプションを一度に追加する方がよい場合があります。以下の解決策はこれを1回の操作で行います。つまり、DOMの書き換えは1回だけです。これは速度面では優れた方法です。

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