JSFiddle - React, Tailwind, and code Playground

by krofdrakula

HTML

<ol class="event-list">
    <li itemscope itemType="http://data-vocabulary.org/Event">
        <time itemprop="startDate" datetime="2011-03-03">3. marec 2011</time>
        <a href="#" itemprop="summary url">Samica človeške vrste</a>
        <span itemprop="eventType">komedija</span>
    </li>
</ol>

JavaScript

(function($) {
    var log = function() {
        if(console && console.debug)
            console.debug(arguments);
        else if(console && console.log) {
            console.log(Array.prototype.slice.call(arguments).join(', '));
        }
    };
    $(function() {
        $('[itemscope]').each(function() {
            var $t = $(this),
                propElements = $t.find('[itemprop]'),
                props = [];
            propElements.each(function() {
                var propname = $(this).attr('itemprop').toLowerCase().split(' '), $p = $(this);
                for(var i = 0; i < propname.length; i++) {
                    var v = $p.text();
                    if(propname[i] == 'url') {
                        // elements with href
                        if($p.is('a,area,link'))
                            v = $p.attr('href');
                        // elements with src
                        else if($p.is('audio,embed,iframe,img,source,video'))
                            v = $p.attr('src');
                        // elements with data
                        else if($p.is('object'))
                            v = $p.attr('data');
                    }
                    if($p.is('time'))
                        v = $p.attr('datetime') || $p.text();
                    props.push({ property: propname[i], value: v });
                }
            });
            log('Microdata item', $(this).attr('itemtype'), $.map(props, function(el, idx) {
                return el.property + '=' + el.value;
            }).join(', '));
        });
    });
})(jQuery);