title: Get all data attributes of an element and their value in jquery
body: <p>I have a element defined as follows: </p>
  
  <pre><code>&lt;span class="road-btn js-road-btn" data-lat-s=' + row.LatL + ' data-lng-s=' + row.LongL + ' data-lat-e=' + row.LatD + ' data-lng-e=' + row.LongD +'&gt; &lt;i class="icon-pin"&gt;&lt;/i &gt;&lt;/span &gt; 
  </code></pre>
  
  <p>I have performed a click event on this element as :</p>
  
  <pre><code>$('.js-road-btn').on('click', function () {
      var latS = $(this).attr('data-lat-s');
      var longS = $(this).attr('data-lng-s');
      var latE = $(this).attr('data-lat-e');
      var longE = $(this).attr('data-lng-e');
  });
  </code></pre>
  
  <p>Instead of getting each attribute separately, I want to retrieve all the attributes values as a whole. Then I access the properties separaretly. How can I achieve this in jquery ?</p>