title: Using jQuery to get unknown data attributes and copy them to new element
body: <p>I am trying to create a custom dropdown select style by converting a standard form select into a <code>&lt;li&gt;</code> list, however I need to add a few <code>-data</code> attributes to each <code>&lt;option&gt;</code> which then need to be copied over to the <code>&lt;li&gt;</code>. </p>
  
  <p>The problem is that I do not always know what those data attributes will be called and therefore I would like a way of just copying any data attributes from the <code>&lt;option&gt;</code> tag onto the <code>&lt;li&gt;</code> tag.</p>
  
  <p>My current code is as follows:</p>
  
  <p>Original <code>&lt;option&gt;</code> tag...</p>
  
  <pre><code>&lt;option data-somedata="something" data-else="something else" value="some value"&gt;Hello&lt;/option&gt;
  </code></pre>
  
  <p>And the jQuery...</p>
  
  <pre><code>jQuery('.fancy-select .field option').each(function(){
    jQuery(this).parents('.fancy-select').find('ul').append('&lt;li&gt;&lt;a href=""&gt;' + jQuery(this).text() + '&lt;/a&gt;&lt;/li&gt;')
  });
  </code></pre>
  
  <p>Is there a way of copying all data attributes from my option tag to the <code>&lt;li&gt;</code> tags without specifying them by name?</p>