title: JQuery - selecting first instance of a div class id on page
body: <p>I am wanting to select the first instance of a a div id of the form volume_header_+id# that appears on a page. If I explicitly put the id#, for example <code>volume_header_123</code>, the code works.  But when I try to replace that with a generic selector to select the first occurrence no mater what the id# is, everything breaks.</p>
  
  <pre><code>&lt;div class="volume_wrapper"&gt;
    &lt;div id="volume_header_123" class="volume_header"&gt;
      …
    &lt;/div&gt; //end volume_header_123
    &lt;div id="volume_issues_123" class="volume_issues" style="display: block;"&gt;
      &lt;div class="issue_wrapper"&gt;
        &lt;div id="issue_header_123_6" class="issue_header"&gt;
          …
        &lt;/div&gt; //end issue_header_123_6
        &lt;div id="issue_toc_123_6" class="issue_toc" style="display: none;"&gt;
          &lt;div class="toc_item"&gt;
            …
          &lt;/div&gt; //end toc_item
        &lt;/div&gt; //end issue_toc_123_6
      &lt;/div&gt; //end issue_wrapper
    &lt;/div&gt; //end volume_issues_123
  &lt;/div&gt; //end volume_wrapper
  </code></pre>
  
  <p>The following code works properly when explicitly stating the div id, but I need to make it generic so it selects the first occurrence, regardless of the id# appended to the end of <code>volume_header_</code> or <code>volume_issues_</code>.</p>
  
  <pre><code>      jQuery('#volume_header_123').css('border-bottom', '1px solid #cc0000');
        jQuery('#volume_header_123').addClass('selected');
        jQuery('#volume_issues_123').slideDown(50);
  </code></pre>
  
  <p>I have experimented with .eq(0), :first, and several other selectors according to some of the other answer given on this site, but I can't seem to find the right syntax.</p>