克隆选择元素并包装

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