在不删除类的情况下将html标记替换为另一个

时间:2017-11-20 17:49:48

标签: jquery html

我有一个像这样的按钮:

<button class="simplefavorite-button" data-postid="616" data-siteid="1" data-groupid="1" data-favoritecount="0"><i class="fa fa-heart ico_heart" aria-hidden="true"></i></button>

我已尝试使用此代码更改<button>标记<li>标记:

jQuery('button').contents().unwrap().wrap('<li/>');

但它删除了所有其他数据和类名。是否有其他方法可以将类保留在新标记中?

1 个答案:

答案 0 :(得分:0)

属性是可迭代的。只需在包装内容之前手动复制它们。

jQuery('button').each(function(){
  var clone = document.createElement('li');
  for(var i = 0, len = this.attributes.length; i < len; i++) {
    clone.setAttribute(this.attributes[i]['name'], this.attributes[i]['value']);
  }
  $(this).contents().unwrap().wrap(clone);
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="simplefavorite-button" data-postid="616" data-siteid="1" data-groupid="1" data-favoritecount="0"><i class="fa fa-heart ico_heart" aria-hidden="true"></i></button>