title: Using 'starts with' selector on individual class names
body: <p>If I have the following:</p>
  
  <pre><code>&lt;div class="apple-monkey"&gt;&lt;/div&gt;
  &lt;div class="apple-horse"&gt;&lt;/div&gt;
  &lt;div class="cow-apple-brick"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can use the following selector to find the first two DIVs:</p>
  
  <pre><code>$("div[class^='apple-']")
  </code></pre>
  
  <p>However, if I have this:</p>
  
  <pre><code>&lt;div class="some-other-class apple-monkey"&gt;&lt;/div&gt;
  &lt;div class="apple-horse"&gt;&lt;/div&gt;
  &lt;div class="cow-apple-brick"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It will only find the second DIV, since the first div's class is returned as a string (I think) and doesn't actually start with 'apple-' but rather 'some-'</p>
  
  <p>One way around that is to not use starts with, but instead contains:</p>
  
  <pre><code>$("div[class*='apple-']")
  </code></pre>
  
  <p>The problem with that is it will also select the 3rd DIV in my example.</p>
  
  <p>Question: Via jQuery, what is the proper way to use predicate selectors on individual class names, rather than the entire class attribute as a string? Is it just a matter of grabbing the CLASS, then splitting it into an array and then looping through each individual one with regex? Or is there a more elegant/less verbose solution? </p>