Question

我有多个同一类的div标签，其中有无线电选项，我转换为选择选项。一切都很好，直到我尝试前置＆＃34;过去是＆＃34; h4 now＆＃34;选项＆＃34;到选择标签。我无法弄清楚如何使prependTo移动＆＃34;每个＆＃34;特别选择它的相应选择标签。我在将其转换为选项后立即尝试了.next（），css sibling，.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'));
});

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

1 个答案: