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

선택한 첫 번째 전에 HTML에서 새 내용을 넣어, t 암탉은 원래의 선택으로 돌아가서 그것을 제거합니다.

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>

많은 솔루션이 있습니다 귀하의 문제와 그들 중 하나

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