Javascript JQuery：使用相同的自定义属性创建相应的元素

在这里拉小提琴：

无论出于何种原因，假设我想使用JQuery将三个dom元素替换为另外三个，但我想将第一个元素中的一个或多个数据属性转移到它们相应的替换项上

给定以下HTML：

<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>

如何确保每个自定义数据属性都有一个新元素

例如：

$(document).ready( function(){
  var $originalEl = $('.original')
  var originalData = $originalEl.data('custom')
  var replacement = '<div class="new" data-custom="' + originalData + '"></div>'
  $originalEl.after(replacement).hide()
});

$（文档）.ready（函数（）{
变量$originalEl=$（'.original'）
var originalData=$originalEl.data（'自定义'）
var替换=“”
$originalEl.after（替换）.hide（）
});

---

但这将创建三个新的data custom=“dog”属性。

必须使用

$。每个
都用于元素。
在声明
$originalEl

$originalEl.each(function(){
    // code here
})

这是您更新的代码
您必须为元素使用
$。每个
。
在声明
$originalEl

$originalEl.each(function(){
    // code here
})

这是您的代码更新


jQuery提供了大量DOM操作方法，可以帮助您实现所需的输入。正如其他一些答案所指出的，您需要使用
$遍历匹配的元素集。每个
。此外，您可以使用
.clone（）
方法来执行以下操作，而不是从字符串创建新元素：

克隆现有元素
修改新元素
将其插入原始元素之后
遍历到原始元素
最后隐藏原始元素

$（函数（）{
$（'.original'）。每个（函数（idx，元素）{
$（要素）
.clone（）
.removeClass（'original'））
.addClass（“新建”）
.insertAfter（$（elem））
.prev（）
.hide（）；
});
});
div{
宽度：100px；
高度：100px；
}
部门：以前{
内容：attr（数据自定义）；
}
.原件{
边框：蓝色实心1px；
}
.新的{
边框：粉红色实心1px；
}
jQuery提供了大量DOM操作方法，可帮助您实现所需的输入。正如其他一些答案所指出的，您需要使用
$遍历匹配的元素集。每个
。此外，您可以使用
.clone（）
方法来执行以下操作，而不是从字符串创建新元素：

克隆现有元素
修改新元素
将其插入原始元素之后
遍历到原始元素
最后隐藏原始元素

$（函数（）{
$（'.original'）。每个（函数（idx，元素）{
$（要素）
.clone（）
.removeClass（'original'））
.addClass（“新建”）
.insertAfter（$（elem））
.prev（）
.hide（）；
});
});
div{
宽度：100px；
高度：100px；
}
部门：以前{
内容：attr（数据自定义）；
}
.原件{
边框：蓝色实心1px；
}
.新的{
边框：粉红色实心1px；
}


$(document).ready(function(){
    $('.original').each(function(){
        $(this).hide().clone().attr('class','new').show().appendTo('body');
    })
});