title: jQuery.siblings not finding siblings
body: <p>I have a very peculiar issue with a web system that I'm maintaining. In a view I want to fetch a question number from a label field in my DOM. However my code isn't able to find the label element. </p>
  
  <p>This is the script part.</p>
  
  <pre><code>$(document).ready(function () {
                  $(function () {
                  var result = $(".answer").click(function () {
                      $(this).editable({
                          className: "",
                          saveUrl: "../api/Results/SaveResults",
                          create: function () {
                              var number = $(this).siblings(".number").text();
                              console.log(number);
                              $(this).editable("option", "questionNumber", number);
                          }
                      });
                  });
              });
          });
  </code></pre>
  
  <p>And this is the HTML</p>
  
  <pre><code>&lt;div class="questionDiv"&gt;
                      &lt;asp:Label ID="questionNumber1" runat="server" CssClass="number"&gt;&lt;/asp:Label&gt;
                      &lt;asp:TextBox ID="answer1" Wrap="True" runat="server" CssClass="answer" TextMode="MultiLine" Width="100%"
                              Rows="5" MaxLength="2000" Columns="65"&gt;&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>And rendered in the browser:</p>
  
  <pre><code>&lt;span id="questionNumber1" class="number"&gt;1&lt;/span&gt;
  &lt;textarea name="answer1" rows="5" cols="65" id="answer1" class="answer" style="width: 540px; "&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>For some reason, number in the create function becomes an empty string. One of the reasons for using <code>$(this)</code> is because there are more than one question per page. The <code>label.text</code> is set from the code behind in the <code>Page_Load()</code> method.</p>
  
  <p>I've been trying with a number of different combinations;</p>
  
  <pre><code>$(this).prev().text()
  
  $(this).parent().children(".number").text()
  
  $(this).parent().children().find(".number").text()
  </code></pre>
  
  <p>etc. </p>
  
  <p>If I try these combinations in the chrome console, ie. <code>$("#answer1").siblings().text()</code> it works perfectly. </p>
  
  <p>Does anyone have any clue as to why this is happening? All the elements should be rendered as it's done in the <code>document.ready()</code> function.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Peter</p>
  
  <p>EDIT: After som more investigation I've noticed that even if I use <code>var number = $("questionNumber1").text();</code> I just get an empty string. Could the problem have something to do with the DOM not being loaded fully. The script block is in an <code>document.ready()</code> so one would guess that the DOM is loaded.</p>