how to access custom data-* html5 attribute placed in different tag, commonly in jquery?

Question

I'm trying to create a in-place editor where I'm fetching the data by putting the custom data attributes in different tags. I want to access the data in jquery selector and update the value accordingly. Please guide me with the common syntax used to fetch data for different tags.

Thanks.

Answer 1

<dic class='test' data-attr='abc' ></div>
$('div.test').attr('data-attr')

Answer 2

you can check like this.

 $('*').filter(function() { if($(this).data('custom')){ console.log($(this).data('custom')); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div data-custom="lol"> 1 </div> <p data-custom="wew"> 2 </p> <h1 data-custom="h1">h1</h1>

Answer 3

If you have different tags you can add a class to the tags, then select those elements by class name.

$('.my-class').each(function(){
    $(this).data('key', myVal);
});