title: How do I get the correct DOM elements with javascript?
body: <p>I need to get the text in a sibling span element and the name of a parent div when the user clicks on an "a" element that will be repeated hundreds of times. (In the example below I just include two but you get the idea.) See my code below and please help me understand how to name them at the spot marked with comments. Both javascript and jQuery are available to solve the problem.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="div001"&gt;
        &lt;a href="javascript:{}" class="citation"&gt;&lt;span class="book"&gt;Book 1&lt;/span&gt; &lt;span class="month"&gt;January&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="output001"&gt;&lt;/div&gt;
  
      &lt;div id="div002"&gt;
        &lt;a href="javascript:{}" class="citation"&gt;&lt;span class="book"&gt;Book 2&lt;/span&gt; &lt;span class="month"&gt;February&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="output002"&gt;&lt;/div&gt;
  
      &lt;script id="source" language="javascript" type="text/javascript"&gt;
        var $j = jQuery.noConflict();
        $j( ".citation" ).click(function ( )
        {
          event.preventDefault();
  
          var book = ???;     // &lt;==== How do I capture “Book 1” or “Book 2”?
          var divName = ???;  // &lt;==== How do I capture “div001” or “div002”?
  
          $j('#' + divName.replace('div', 'output')).html(book);
        }); 
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>