Question

无论出于何种原因，假设我想使用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()
});

但这会创建三个新的数据 - custom =＆＃34; dog＆＃34;属性。

Answer 1

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

之后开始

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

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

Answer 2

http://jsfiddle.net/VixedS/wz95hh3r/1/

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

Answer 3

jQuery提供了许多DOM操作方法，可以帮助您实现所需的输入。如其他一些答案所述，您需要使用$.each遍历匹配元素集。此外，您可以使用.clone()方法：

，而不是从字符串创建新元素

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

＆＃13;

$(function () {
    $('.original').each(function (idx, elem) {
        $(elem)
            .clone()
            .removeClass('original')
            .addClass('new')
            .insertAfter($(elem))
            .prev()
            .hide();
    });
});

＆＃13;

div {
  width: 100px;
  height: 100px;  
}

div:before {
  content: attr(data-custom);
}

.original {
  border: blue solid 1px;
}

.new {
  border: pink solid 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>

＆＃13;

API方法参考：

JQuery：使用相同的自定义attrs创建相应的元素

3 个答案: