Question

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

问题是，每当我创建一个新的tumblr帖子并编辑post html以包含div的“data-layout”部分时，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");

Answer 2

您可以通过几个步骤完成。首先，保存id值。其次，使用该值创建“数据布局”属性。最后，删除id属性。

$('.photoset-grid').each(function(){ 
    var identifier = $(this).attr('id'); 
    $(this).attr('data-layout',identifier).removeAttr('id');
});