JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<img src="http://www.google.com/logos/tanabata2010-hp.jpg" class="isearcher {tags : ['paris hilton', 'gary suneese']}"/>
CSS
#posts { overflow-y: scroll; height: 300px; }
#posts_content { height: 2000px; }
div { border: solid 1px #ddd; }
JavaScript
(function($) {
$.extend({
metadata : {
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
},
setType: function( type, name ){
this.defaults.type = type;
this.defaults.name = name;
},
get: function( elem, opts ){
var settings = $.extend({},this.defaults,opts);
// check for empty string in single property
if ( !settings.single.length ) settings.single = 'metadata';
var data = $.data(elem, settings.single);
// returned cached data if it already exists
if ( data ) return data;
data = "{}";
var getData = function(data) {
if(typeof data != "string") return data;
if( data.indexOf('{') < 0 ) {
data = eval("(" + data + ")");
}
}
var getObject = function(data) {
if(typeof data != "string") return data;
data = eval("(" + data + ")");
return data;
}
if ( settings.type == "html5" ) {
var object = {};
$( elem.attributes ).each(function() {
var name = this.nodeName;
if(name.match(/^data-/)) name = name.replace(/^data-/, '');
else return true;
object[name] = getObject(this.nodeValue);
});
} else {
if ( settings.type == "class" ) {
var m = settings.cre.exec( elem.className );
if ( m )
data = m[1];
} else if ( settings.type == "elem" ) {
if( !elem.getElementsByTagName ) return;
var e = elem.getElementsByTagName(settings.name);
if ( e.length )
data = $.trim(e[0].innerHTML);
} else if ( elem.getAttribute != undefined ) {
var attr = elem.getAttribute( settings.name );
if ( attr )
data = attr;
}
object = getObject(data.indexOf("{") < 0 ? "{" + data + "}" : data);
}
$.data( elem,...