使用 jquery 或 Raw javascript 更改元素本身答案

【问题标题】：Change an element itself with jquery or Raw javascript使用 jquery 或 Raw javascript 更改元素本身
【发布时间】：2013-10-01 06:32:20
【问题描述】：

有什么方法可以用 jQuery 或基本的 Javascript 来改变元素本身。例如：我们有一个 HTML 标签为<a href="mysite.com" title='titlevalue'>Link</a>，我们可以像这样替换它<a href="mysite.com" data-title='titlevalue'>Link</a>。

是的，我们可以添加/删除标题/数据标题属性，但是我们有很多链接，所以如果我们能有这样的东西会更好。在谷歌和这里搜索但没有找到类似的东西，只是更改属性的值和添加/删除属性。

请指教。

谢谢

【问题讨论】：

你试过什么？另外，我不明白你在问什么。 add/remove 属性怎么不是你想要的？
生成标记时为什么不这样做呢？

标签： javascript jquery dom attributes elements

【解决方案1】：

如果你想为每个锚标签添加数据标题属性，通过使用标题属性中的值，你可以这样做：

$("a").each(function(){
    $(this).attr("data-title", $(this).attr("title"));
    $(this).removeAttr("title");
});

【讨论】：

小心。如果您只是添加 data-title jQuery 在其数据中没有标题（请参阅我的 anwser）。 @ScottMermelstein 如果他改变一切，那将是我的答案：p
更改答案以删除标题属性

【解决方案2】：

这会将所有 a-Tag 中的标题更改为数据标题：

$("a").each(function() {
$(this).attr("data-title", $(this).attr("title"));
$(this).data("title", $(this).attr("title"));
$(this).removeAttr("title");
});

http://jsfiddle.net/eC2cQ/

【讨论】：

你可以"chain"一起来：$(this).attr("data-title", $(this).attr("title")).data("title", $(this).attr("title")).removeAttr("title")

【解决方案3】：

嗯...没有 jQuery...（只是因为有这个选项总是很好）

var el = document.getElementsByTagName("a");
for(i=0; i < el.length; i++) {
    el[i].setAttribute("data-title", el[i].getAttribute("title"));
    el[i].removeAttribute("title");
}

【讨论】：

【解决方案4】：

也可以这样：

$('a').attr('data-title', function () {
    return this.title
}).removeAttr('title');

【讨论】：

【解决方案5】：

使用jQuery，您可以执行以下操作：

// 找到每个带有title属性的标签

$( 'a[title]' ).each( function ( index, item ) {
  // cache your jQuery object
  var $item = $(item);

  // replace and remove the attributes
  $item.attr( 'data-title', $item.attr( 'title' ) );
  $item.removeAttr( 'title' );
});

一些注意事项：

如果您希望新页面中的元素具有自定义属性，您可以最好改变你的后端流程来创建这些新的属性。对此进行扩展：如果您正在手动编码新页面，只需写出新属性；如果您使用的是服务器端技术，使用您已经使用的模板系统来编写淘汰这些新属性。
您的示例不是很好的做法：标题属性对许多人和机器。用 data-title 替换它们可以防止许多标准技术来自于查找其中包含的信息。有额外的数据属性暗示的含义，它们是额外的，特定于应用程序的信息和链接标题更好地用于通用方式。
这是多余的：如果你能读到 data-attribute，也可以读取普通属性。
还有其他方法可以在不使用 jQuery 的情况下做到这一点，但它是当今使用的非常典型的库

【讨论】：

只是解决你的最后一个问题：虽然 jQuery 很常用，但它也经常被滥用。我的意思是，有很多页面加载 90kb 的 jQuery 库只是为了执行 DOM 调用（有些甚至不加载压缩版本，所以 >270kb）。 jQuery 是一个很棒的库，但不应该建议人们只使用它来执行几个基本的 DOM 功能。