将选择及其选项转换为 div

Question

>我正在尝试将选择和它的选项转换为div 和子div。我想要的是每个选择都是具有转换 id 的div 内部的div(这是有效的(，而在那些div 中，我希望它是相关的选项，我没有弄清楚该怎么做，如果有人知道，我将不胜感激。

$('.selects select').each(function(){
var select = $(this);
$('#transform').append('<div>');
select.find('option').each(function(){
var option = $(this).text();
$('#transform div').append('<div>'+option+'</div>');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>   
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
<div id='transform'></div>

Answer 1

解决此问题的最简单方法是存储对要附加子div 的div 的引用。 然后在最后，将父div 附加到您想要的任何位置。 这样，您就不必找到/记住孩子们应该去哪里。

$('.selects select').each(function(){
var select = $(this);
var $div = $('<div>');
select.find('option').each(function(){
var option = $(this).text();
$div.append('<div>'+option+'</div>');
});
$('#transform').append($div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>   
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
<div id='transform'></div>