JQuery:创建具有相同自定义属性的相应元素

JQuery: create corresponding elements with same custom attrs

本文关键字：自定义属性 元素 JQuery 创建      更新时间：2023-09-26

点击此处：http://jsfiddle.net/yv1vLhd9/

无论出于何种原因，假设我想使用JQuery将三个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="dog"属性。

元素必须使用$.each。申报$originalEl 后开始

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

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

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

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

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

  1. 克隆现有元素
  2. 修改你的新元素
  3. 将其插入原始元素之后
  4. 遍历到原始图元
  5. 并最终隐藏原始元素

$(function () {
    $('.original').each(function (idx, elem) {
        $(elem)
            .clone()
            .removeClass('original')
            .addClass('new')
            .insertAfter($(elem))
            .prev()
            .hide();
    });
});
div {
  width: 100px;
  height: 100px;  
}
div:before {
  content: attr(data-custom);
}
.original {
  border: blue solid 1px;
}
.new {
  border: pink solid 1px;
}
<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>

API方法参考：

  • jQuery.each()
  • .clone()
  • .removeClass()
  • .addClass()
  • .insertAfter()
  • .prev()
  • .hide()
相关文章：