$.fn.testDataAndDefaults = function(options) { this.each(function() { var $this = $(this); var settings = $.extend(true, {}, $.fn.testDataAndDefaults.defaults, $this.data(), options); $this.append('<p>' + settings.complex.adjective + ' Name: ' + settings.name + '</p>'); $this.append('<p>Age: ' + settings.age + '</p>'); }); }; $.fn.testDataAndDefaults.defaults = { name: 'Guest', age: 0, complex: { adjective: 'cool' } }; $('div').testDataAndDefaults(); $('#options').testDataAndDefaults({age: 100});
<div id="full" data-name="Full Hoguet", data-age="1"></div> <div id="partial" data-name="Partial Hoguet"></div> <div id="none"></div> <p id="options" data-name="Options Hoguet", data-age="2"></p> <div id="complex" data-complex='{"adjective" : "really cool"}', data-age="2"></div>