克隆选择元素并换行

Question

我通过以下方式克隆多个选择元素。这工作完美：

演示：https://jsfiddle.net/DTcHh/36308/

// get all items of specific class
var $selectedClassDiv = $('.to-clone');

// find select eles and clone into div
$('#cloned-list').html($selectedClassDiv.find('select').clone());

// loop through cloned select eles to set the correct selected option
$selectedClassDiv.find("select").each(function(i) {
  var select = this;
  $('#cloned-list').find("select").eq(i).val($(select).val());
});

我遇到的问题是我想将这些选择项包装在具有自定义类的 div 中。我尝试了多种方法都无济于事，下面是我的最新尝试。

---

没有效果

$('#cloned-list').html($selectedClassDiv.find('select').clone().wrap('<div class="customClass"></div>'));

演示：https://jsfiddle.net/DTcHh/36309/

导致错误

$('#cloned-list').html($selectedClassDiv.find('select').clone().parent().wrap('<div class="customClass"></div>'));

演示：https://jsfiddle.net/DTcHh/36310/

我对将 div 包裹在所选项目周围的解决方案感兴趣。克隆父 div 并添加一个类不是一种选择。

Answer 1

您可以在当前循环中添加它：

https://jsfiddle.net/DTcHh/36311/

$selectedClassDiv.find("select").each(function(i) {
  var select = this;
  $('#cloned-list').find("select").eq(i).val($(select).val()).wrap('<div class="customClass"></div>');
});