jQuery.siblings没有找到兄弟姐妹

Question

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.

This is the script part.

$(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);
                        }
                    });
                });
            });
        });

And this is the HTML

<div class="questionDiv">
                    <asp:Label ID="questionNumber1" runat="server" CssClass="number"></asp:Label>
                    <asp:TextBox ID="answer1" Wrap="True" runat="server" CssClass="answer" TextMode="MultiLine" Width="100%"
                            Rows="5" MaxLength="2000" Columns="65"></asp:TextBox>
                </div>

And rendered in the browser:

<span id="questionNumber1" class="number">1</span>
<textarea name="answer1" rows="5" cols="65" id="answer1" class="answer" style="width: 540px; "></textarea>

For some reason, number in the create function becomes an empty string. One of the reasons for using $(this) is because there are more than one question per page. The label.text is set from the code behind in the Page_Load() method.

I've been trying with a number of different combinations;

$(this).prev().text()

$(this).parent().children(".number").text()

$(this).parent().children().find(".number").text()

etc.

If I try these combinations in the chrome console, ie. $("#answer1").siblings().text() it works perfectly.

Does anyone have any clue as to why this is happening? All the elements should be rendered as it's done in the document.ready() function.

Thanks in advance.

Peter

EDIT: After som more investigation I've noticed that even if I use var number = $("questionNumber1").text(); 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 document.ready() so one would guess that the DOM is loaded.

Answer 1

Maybe this inside create method refers to anything else than $(".answer") ?

Try to backup, possibly it helps:

var result = $(".answer").click(function() {
    var $this = $(this);
    $this.editable({
        className: "",
        saveUrl: "../api/Results/SaveResults",
        create: function() {
            var number = $this.siblings(".number").text();
            console.log(number);
            $this.editable("option", "questionNumber", number);
        }
    });
});

Answer 2

The problem was that the create: function was wrapping $(this) in another div. So, parent().parent().first(".number") solved it.