对类的一个元素使用 prependTo 会加载具有相同类的所有元素

Question

我有多个相同类的 div 标签，其中包含我转换为选择选项的单选选项。一切都很好，直到我尝试将“曾经是”h4 现在“选择选项”添加到选择标签。我无法弄清楚如何使 prependTo 将“每个”特定选定选项移动到其相应的选择标签。我在将其转换为选项后立即尝试了 .next()、css 兄弟、.prependTo()，但我继续加载所有随后的 h4 标签。

在这里使用 prependTo 的正确方法是什么？

谢谢

下面显示的是原始 HTML：

<div class="wrapperAttribsOptions">
<h4 class="optionName back">Color</h4>
<div class="row">
<input type="radio" name="id[1]" value="16" id="attrib-1-16"><label class="attribsRadioButton zero" for="attrib-1-16">Red ( +$0.10 )   (0.1lbs) </label>
<input type="radio" name="id[1]" value="25" id="attrib-1-25"><label class="attribsRadioButton zero" for="attrib-1-25">Orange ( +$0.20 )   (+0.1lbs) </label>
<input type="radio" name="id[1]" value="17" id="attrib-1-17"><label class="attribsRadioButton zero" for="attrib-1-17">Yellow ( +$0.30 )   (0.1lbs) </label>
<input type="radio" name="id[1]" value="26" checked="checked" id="attrib-1-26"><label class="attribsRadioButton zero" for="attrib-1-26">Green</label>
<input type="radio" name="id[1]" value="15" id="attrib-1-15"><label class="attribsRadioButton zero" for="attrib-1-15">Blue ( +$0.40 )</label>
<input type="radio" name="id[1]" value="27" id="attrib-1-27"><label class="attribsRadioButton zero" for="attrib-1-27">Purple   (+0.1lbs) </label>
<input type="radio" name="id[1]" value="28" id="attrib-1-28"><label class="attribsRadioButton zero" for="attrib-1-28">Brown</label>
<input type="radio" name="id[1]" value="30" id="attrib-1-30"><label class="attribsRadioButton zero" for="attrib-1-30">White</label>
<input type="radio" name="id[1]" value="31" id="attrib-1-31"><label class="attribsRadioButton zero" for="attrib-1-31">Silver</label>

</div>
<hr>
</div>

我添加了以下内容：

$('.wrapperAttribsOptions input[type=radio]').each(function() {
    $(this).replaceWith('<option class="ipad-option">' + $(this).next('label').text() + '</option>');
});
$('.ipad-option').next('label').remove();

$('.wrapperAttribsOptions .row').each(function() {
    $(this).replaceWith('<select class="ipad-select">' + $(this).html() + '</select>');
});

$('h4.optionName').each(function() {
    $(this).replaceWith('<option class="ipad-option-selected" selected>Select ' + $(this).text() + '</option>');
});

得到如下所示的结果：

<div class="wrapperAttribsOptions">
<option class="ipad-option-selected" selected="">Select Color</option>
<select class="ipad-select">
<option class="ipad-option">Red ( +$0.10 )   (0.1lbs) </option>
<option class="ipad-option">Orange ( +$0.20 )   (+0.1lbs) </option>
<option class="ipad-option">Yellow ( +$0.30 )   (0.1lbs) </option>
<option class="ipad-option">Green</option>
<option class="ipad-option">Blue ( +$0.40 )</option>
<option class="ipad-option">Purple   (+0.1lbs) </option>
<option class="ipad-option">Brown</option>
<option class="ipad-option">White</option>
<option class="ipad-option">Silver</option>

</select>
<hr>
</div>

Answer 1

没关系，明白了。

我添加了这个：

$('.ipad-option-selected').each(function() {
    $(this).prependTo($(this).next('.ipad-select'));
});