javascript - 使用 Jquery 将 <div id =""> 更改为 <div data-layout ="">？

Question

所以我正在构建一个 tumblr 模板，并且使用 stylehatch 的 Photoset-grid 插件。该插件可以工作，并且在自定义 html 部分中我可以制作一个功能齐全的网格。

问题是，每当我发布新的 tumblr 帖子并编辑帖子 html 以包含 div 的“数据布局”部分时，tumblr 都会将其删除。 (显然，Tumblr 帖子只能在 div 中包含自定义类和 id)

我需要的标记是这样的:

<div class="photoset-grid" data-layout="132">

但是当我保存帖子时，tumblr 会删除数据布局部分，所以我得到了这个:

<div class="photoset-grid">

我的问题是:我可以使用 jquery 来替换数据布局的 div id 吗？

所以如果我这样写:

<div class="photoset-grid" id="132">

在插件加载之前，jquery 可以将其更改为这样，以便其正常工作吗？

<div class="photoset-grid" data-layout="132">

Answer 1

您不能直接替换属性，但您可以简单地获取 id 属性值，创建新的数据属性，然后删除 ID 属性。

$(".photoset-grid").attr("data-layout", function () { return this.id })
    .removeAttr("id");

http://jsfiddle.net/ERCPB/