title: How to select only one sibling with jQuery?
body: <p>I have this code: </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="foo"&gt;foo text&lt;/li&gt;
    &lt;li class="foo2"&gt;foo2 text&lt;/li&gt;
    &lt;!-- more li here --&gt;
    &lt;li class="bar"&gt;bar text&lt;/li&gt;
    &lt;li class="bar2"&gt;bar2 text&lt;/li&gt;
    &lt;!-- more li here --&gt;
    &lt;li class="baz"&gt;clickme!&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(".baz").click(function() {
      alert("test: " + $(this).siblings(".bar")[0].text()); // Doesn't work
  });
  </code></pre>
  
  <p><code>siblings(".bar")[0]</code> doesn't work. (no alert box pops up, and no javascript error)</p>
  
  <p>What is the proper way to select one sibling only ?</p>
  
  <p><a href="http://jsfiddle.net/fMT5x/" rel="noreferrer">jsFiddle try</a></p>
  
  <p><strong>Edit:</strong> I don't want to use <code>prev()</code> or <code>next()</code>.</p>