Getting all HTML elements in the DOM where an attribute name starts with some-string
<p>I've stumbled upon a tricky one, that I haven't been able to find any references to (except one here on Stackoverflow, that was written quite inefficiently in Plain Old Javascript - where I would like it written in jQuery).</p>

<p><strong>Problem</strong></p>

<p>I need to retrieve all child-elements where the <strong>attribute-name</strong> (note: <strong>not</strong> the <em>attribute-value</em>) starts with a given string.</p>

<p>So if I have:</p>

<pre><code>&lt;a data-prefix-age="22"&gt;22&lt;/a&gt;
&lt;a data-prefix-weight="82"&gt;82&lt;/a&gt;
&lt;a href="#"&gt;meh&lt;/a&gt;
</code></pre>

<p>My query would return a collection of two elements, which would be the first two with the <strong>data-prefix-</strong>-prefix</p>

<p>Any ideas on how to write up this query?</p>

<p>I was going for something like:</p>

<pre><code>$(document).find("[data-prefix-*]")
</code></pre>

<p>But of course that is not valid</p>

<p>Hopefully one of you has a more keen eye on how to resolve this.</p>

<p><strong>Solution</strong></p>

<p>(See accepted code example below)</p>

<p>There is <em>apparently</em> <strong>no direct way to query on partial attribute names</strong>. What you should do instead (this is just one possible solution) is </p>

<ol>
<li>select the smallest possible collection of elements you can</li>
<li>iterate over them</li>
<li>and then for each element iterate over the attributes of the element</li>
<li>When you find a hit, add it to a collection</li>
<li>then leave the loop and move on to the next element to be checked. </li>
</ol>

<p>You should end up with an array containing the elements you need.</p>

<p>Hope it helps :)</p>
