换一个 <div id=“”> 至 <div data-layout=“”> 使用jQuery吗？

Question

So I am building a tumblr template, and I am using stylehatch's Photoset-grid plugin. The plugin works, and in the custom html section I can make a fully functional grid.

The problem is, whenever I make a new tumblr post and edit the posts html to include the "data-layout" portion of the div, tumblr erases it. (Tumblr posts can only contain custom classes and id's in div's, apparently)

The markup I need is this:

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

But tumblr erases the data-layout part when I save the post, so i get this:

<div class="photoset-grid">

My question is this: Can I use jquery to substitute a div id for a data layout?

So If I write this:

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

Can jquery change it to this, before the plugin loads so it works correctly?

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

Answer 1

You can't substitute attributes directly, but you can simply get the id attribute value, create the new data attribute, and remove the ID attribute.

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

http://jsfiddle.net/ERCPB/

Answer 2

You can do it in a few steps. First, save off the id value. Second, create a 'data-layout' attribute with that value. Lastly, remove the id attribute.

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