title: Splitting apart all grabbed links
body: <p>Assume I have the following code:</p>
  
  <pre><code>&lt;div class="product"&gt;
       &lt;div class="prod-img"&gt;&lt;img src="#" /&gt;&lt;/div&gt;
       &lt;div class="prod-name"&gt;
            &lt;a href="#"&gt;Product Name Here&lt;/a&gt;
            &lt;a href="#"&gt;Stuff we don't want to display&lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="product"&gt;
       &lt;div class="prod-img"&gt;&lt;img src="#" /&gt;&lt;/div&gt;
       &lt;div class="prod-name"&gt;
            &lt;a href="#"&gt;Product Name Here&lt;/a&gt;
            &lt;a href="#"&gt;Stuff we don't want to display&lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="product"&gt;
       &lt;div class="prod-img"&gt;&lt;img src="#" /&gt;&lt;/div&gt;
       &lt;div class="prod-name"&gt;
            &lt;a href="#"&gt;Product Name Here&lt;/a&gt;
            &lt;a href="#"&gt;Stuff we don't want to display&lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I can use the following code to get all of the product names:</p>
  
  <pre><code>$( document ).ready(function() {
      var products = $('.prod-name').find('a:first').text().trim();
      alert(products);
  });
  </code></pre>
  
  <p>The problem is that it just shows all of the products in one giant string. Is there anyway I can separate these? with like a " | " or something?</p>