javascript - JQuery:使用相同的自定义属性创建相应的元素

Question

在这里摆弄:http://jsfiddle.net/yv1vLhd9/

无论出于何种原因，假设我想使用 JQuery 将三个 dom 元素替换为另外三个 dom 元素，但我想将一个或多个数据属性从第一个元素传输到其相应的替换元素上。

给定以下 HTML:

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

以及以下 CSS:

div {
  width: 100px;
  height: 100px;  
}

div:before {
  content: attr(data-custom);
}

.original {
  border: blue solid 1px;
}

.new {
  border: pink solid 1px;
}

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

例如:

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

但这会创建三个新的 data-custom="dog"属性。

Answer 1

您必须使用 $.each 作为元素。 在声明 $originalEl

后开始

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

这是您更新的代码 http://jsfiddle.net/yv1vLhd9/4/