jQuery可排序不适合我

Question

我看了很多例子，看不出我做错了什么。

我的javascript在排序后调用，在javascript中我想设置@ Html.HiddenFor元素的值。但是，我似乎无法正确掌握它。

我试图效仿这个例子：
Posting sortable form items to an MVC controller

我的MVC视图（通过ajax调用加载）如下所示：

<div class="row" id="listoptions">
    <div class="form-group">
        <div class="col-md-9">
    @Html.Label("List Options", htmlAttributes: new { @class = "control-label" })
    <ul id="editorRows" style="list-style-type: none; padding:0; margin: 0" class="sortMe">
        @if (Model.CustomFieldOptions != null)
             {
                 foreach (var cfItem in Model.CustomFieldOptions)
                  {
                      Html.RenderPartial("_CustomFieldOptionEditorRow", cfItem);
                  }
             }
    </ul>
    <input type="button" value="Add an Option" class="btn btn-link"
           onclick="AddItem('@Url.RouteUrl("Default", new { action = "_AddOptionEditorRow", id = Model.CustomFieldId }, Request.Url.Scheme)');" />
        </div>
    </div>
</div>

脚本：

CheckSelectedText = function (textVal) {
    if (textVal.indexOf("List") >= 0) {
        //alert('show');
        $('#listoptions').show();
        $("#editorRows").sortable({
            stop: function (event, ui) {

                $("#editorRows li").each(function (index, element) {
                    // find the hidden input in each <li> and set it to its current index, according to the DOM
                    var hiddenInput = $(element).children("#SortOrder").first();
                    hiddenInput.val(index); // We get here, but hiddenInput is undefined
                });
            }
        });
    } else {
        //alert('hide');
        $('#listoptions').hide();
    }
}

_CustomFieldOptionEditorRow视图是：

@using PublicationSystem.Tools
@model PublicationSystem.Model.CustomFieldOption

<li class="editorRow ui-state-default">
    @using (Html.BeginCollectionItem("CustomFieldOptions"))
    {
        @Html.ValidationSummary(true, "", new {@class = "text-danger"})
        @Html.HiddenFor(model => model.CustomFieldOptionId)
        @Html.HiddenFor(model => model.CustomFieldId)
        @Html.HiddenFor(model => model.SortOrder)

        @Html.LabelFor(model => model.OptionLabel, htmlAttributes: new {@class = "control-label col-md-2"})
        @Html.EditorFor(model => model.OptionLabel, new {htmlAttributes = new {@class = "form-control"}})
        @Html.ValidationMessageFor(model => model.OptionLabel, "", new {@class = "text-danger"})
        <a href="#" class="deleteRow">delete</a>

    }
</li>

它呈现出来像这样：

<div class="col-md-9">
    <label class="control-label" for="List_Options">List Options</label>
    <ul id="editorRows" style="list-style-type: none; padding:0; margin: 0" class="sortMe">

        <li class="editorRow ui-state-default">
            ...
            <input data-val="true" data-val-number="The field SortOrder must be a number." 
                data-val-required="The SortOrder field is required."
                id="CustomFieldOptions_1edf018a-00e9-40d6-98bf-62bb674e74ea__SortOrder" 
                name="CustomFieldOptions[1edf018a-00e9-40d6-98bf-62bb674e74ea].SortOrder" 
                type="hidden" value="1">
            <label class="control-label col-md-2" for="CustomFieldOptions_1edf018a-00e9-40d6-98bf-62bb674e74ea__OptionLabel">Label</label>
            <input class="form-control text-box single-line" data-val="true" data-val-length="The field Label must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The Label field is required." id="CustomFieldOptions_1edf018a-00e9-40d6-98bf-62bb674e74ea__OptionLabel" name="CustomFieldOptions[1edf018a-00e9-40d6-98bf-62bb674e74ea].OptionLabel" type="text" value="YadaYada">
            ...
            <a href="#" class="deleteRow">delete</a>
        </li>

        <li class="editorRow ui-state-default">
            ...
        </li>

        <li class="editorRow ui-state-default">
            ...
        </li>
    </ul>
    <input type="button" value="Add an Option" class="btn btn-link" onclick="AddItem('http://localhost:63595/customforms/_addoptioneditorrow/c2e15580-f741-e511-b962-00215e466552');">
</div>