使用javascript将列表项文本框设置为该列表项的索引

Question

如何将列表项中隐藏文本框的值设置为该列表项的索引？

对于上下文，我想在重新排序后将@Html.TextBoxFor(x => @Model.SelectedModuleList[i].PreferedOrder更新为该可排序列表中该列表项的新索引。

我正在尝试在可排序的停止函数中执行此操作，因此是这样的（我不是JavaScript专家，因此需要帮助）：

stop: function (e, ui) {
    var _list = $('#MyList').ToArray();
    _list.forEach(myFunction);

    function myFunction(item, index) {
        //set the value of the textbox here...
    } 
}

和列表

<ul id="columns">
    @for (var i = 0; i < Model.SelectedModuleList.Count(); i++)
    {
    <li id=" @Model.SelectedModuleList[i].ArticleGuid">
        <div class="row igs-selected-modules-list-card igs-selected-box">

            <table class="igs-learning-path-table" id="modTable">
                <tbody class="igs-learning-path-table">
                    <tr>
                        <td align="center" class="igs-selected-module-td">
                            @if (Model.SelectedModuleList[i].ArticleType == "Module" ||
                            Model.SelectedModuleList[i].ArticleType == "Press Release" ||
                            Model.SelectedModuleList[i].ArticleType == "Resource")
                            {
                            <svg class="igs-learning-paths-icon igs-selected-svg igs-type-svg-color">
                                <use xlink:href="/assets/img/spritesheet.svg#icon-module"></use>
                            </svg>
                            }
                            @if (Model.SelectedModuleList[i].ArticleType == "Webcast")
                            {
                            <svg class="igs-learning-paths-icon igs-selected-svg igs-type-svg-color">
                                <use xlink:href="/assets/img/spritesheet.svg#icon-webcast"></use>
                            </svg>
                            }
                            @if (Model.SelectedModuleList[i].ArticleType == "Quick Guide")
                            {
                            <svg class="igs-learning-paths-icon igs-selected-svg igs-type-svg-color">
                                <use xlink:href="/assets/img/spritesheet.svg#icon-quick-guide"></use>
                            </svg>
                            }
                            @if (Model.SelectedModuleList[i].ArticleType == "Video")
                            {
                            <svg class="igs-learning-paths-icon igs-selected-svg igs-type-svg-color">
                                <use xlink:href="/assets/img/spritesheet.svg#icon-video"></use>
                            </svg>
                            }
                        </td>
                        <td align="left" class="igs-selected-type-td">
                            <label class="igs-module-type">@Model.SelectedModuleList[i].ArticleType</label>
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].ArticleType, new { @type = "hidden" })
                        </td>
                        <td align="left" class="igs-selected-name-td">
                            <label class="igs-module-name">@Model.SelectedModuleList[i].ArticleName</label>
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].ArticleName, new { @type = "hidden" })
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].ArticleGuid, new { @type = "hidden", @id = "moduleId" })
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].isSelected, new { @type = "hidden" })
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].ArticleID, new { @type = "hidden" })
                            @Html.TextBoxFor(x => @Model.SelectedModuleList[i].PreferedOrder, new { @type = "hidden" })
                            <input type="hidden" value="@Model.SelectedModuleList[i].ArticleGuid" name="id" />
                        </td>
                        <td align="center">
                            <button class="btn btn-primary btn-round igs-lp-remove-selected-button float-right button-lp-margin  no-padding" type="button" id="removeLearningPath" onclick="DeleteFromList('@Model.SelectedModuleList[i].ArticleGuid')">
                                <div>
                                    <span class="create-learning-path-button-text">Remove</span>
                                </div>
                            </button>
                        </td>
                        <td class="igs-order-td">
                            <svg class="igs-learning-paths-icon igs-selected-svg igs-order-svg-color">
                                <use xlink:href="/assets/img/spritesheet.svg#icon-sort-order"></use>
                            </svg>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </li>
    {
    selectCount++;
    }
    }
</ul>

Answer 1

假设列表的子项是文本区域，则可以使用item.value = i。不过，您想让孩子们先来：

var _list = $('#MyList').children().toArray();
_list.forEach((item, i) => item.value = i)

#MyArray {
  display: flex;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="MyList">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</ul>

• $('#MyList')将获取您的列表元素
• [.children()将抓取该元素的每个子元素（在本例中为textareas）
• toArray()会将这些子级放入数组中
• [forEach将遍历这些孩子中的每个孩子
• item指当前i ndex处的文本区域。因此，item.value提供了一种访问和覆盖文本区域当前值的方法。您想将此设置为索引。