title: How do I get an elements sibling in JQuery, in a function?
body: <p>I am trying to set an element to have the same value as its sibling in JQuery.</p>
  
  <p>I have a table with a number of fields in, and when I click an Edit button I want to copy the value of a label to it's neighbouring input field:</p>
  
  <pre><code>&lt;table style="width:90%"&gt;
    &lt;tr&gt;
      &lt;td&gt;Start&lt;/td&gt;
      &lt;td&gt;
         &lt;span ID="lblSprintStart" class="staticField"&gt;01/01/2001&lt;/span&gt;
         &lt;input class="editableField" id="sprintStart" /&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;End&lt;/td&gt;
       &lt;td&gt;
         &lt;span ID="lblSprintEnd" class="staticField"&gt;02/02/2002&lt;/span&gt;
         &lt;input class="editableField" id="sprintEnd" /&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;
  &lt;button id="editButton"&gt;Edit&lt;/button&gt;
  </code></pre>
  
  <p>I can do it by targeting each individual element by ID:</p>
  
  <pre><code>$(function () {
   $("#editButton")
    .click(function (event) {
     event.preventDefault();
     editMode();
   }); 
  });
  
  function editMode() {     
    $("#sprintStart").val($("#sprintStart").siblings(".staticField").html());
  }
  </code></pre>
  
  <p>But I want to do it by class so all fields are updated. If I change the function to use the $(this) selector and do it by class it doesn't work:</p>
  
  <pre><code>function editMode() {     
     $(".editableField").val($(this).siblings(".staticField").html());
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/QQLvX/1/" rel="nofollow">http://jsfiddle.net/QQLvX/1/</a></p>