Javascript 遍历'；可排序'；列出，然后相应地更改值

我有一个列表中的项目列表：

<ul id="myList">    
    <li>10 Apple</li>
    <li>20 Banana</li>
    <li>30 Orange</li>
</ul>

10个苹果
20香蕉
30橙色

由于jQuery，列表可以排序。然而，一旦我安排了我需要重新计算它们的位置的项目，即移动到顶部的橙色将等于10，苹果将等于20，香蕉30

然后，我需要在url中传递这些数据，以便我的服务器端脚本进行处理

当我提交时，能够将修改后的列表值传递到URL的最佳方式是什么

---

我的第一个想法是有一个带有隐藏值的表单，因此当我处理列表时，它会将值作为隐藏输入添加到表单中，以便我将数据传递到URL。

每个项目前的数字是否严格基于位置

如果是这样，一旦完成排序，您就可以基于每个li元素替换内容

URL如何包含列表文本重要吗

在下面的示例中，我假设它都可以附加一个querystring值list

有较短的方法可以做到这一点，但希望详细的内容将有助于理解发生了什么

<script>
    var listChanger = function() {
    //updates the digits prepended to each item in list
    //updates URL with text of list in querystring

        //accumulates the text of each list item
        var valueAccumulator = [];

        //Operate of each item in myList
        $('#myList li').each(function(index) {

            //regular expression to strip initial digits
            var reInitialDigits = /^\d+/;

            //remove initial digits
            var textWithoutDigits = $(this).text().replace(reInitialDigits,"");

            //prepend new digits (index starts at 0, so add 1 then multiply by 10 to get desired number)
            $(this).text(((index + 1) * 10) + textWithoutDigits);

            //append text to accumulator
            valueAccumulator.push($(this).text());
        });

        //querystring to strip everything after the querystring
        var reQueryString = /\?list\=.*$/;

        //placeholder
        var linkWithoutQueryString = '';

        //remove querystring
        linkWithoutQueryString = $('#myLink').attr('href').replace(reQueryString,'');

        //change link to include URL encoded list of values
        $('#myLink').attr('href',linkWithoutQueryString + "?list=" + encodeURI(valueAccumulator.join("|")));
    }

    $(document).ready(function() {
        //make the list sortable and each time the sorting stops, run the listChanger function
        $("#myList").sortable({stop:listChanger});
    });
</script>

<ul id="myList">
    <li>10 Apple
    </li>
    <li>20 Banana
    </li>
    <li>30 Orange
    </li>
</ul>
<br />
<a id="myLink" href="mylink.html">mylink.html</a>

var listChanger=函数（）{
//更新列表中每个项目前面的数字
//使用querystring中列表的文本更新URL
//累积每个列表项的文本
var值累加器=[]；
//对myList中的每个项目进行操作
$（'#myList li'）。每个（函数（索引）{
//用于去除初始数字的正则表达式
变量reinitialGits=/^\d+/；
//删除起始数字
var textWithoutDigits=$（this）.text（）.replace（reInitialDigits，“”）；
//预加新数字（索引从0开始，所以加1然后乘以10得到所需的数字）
$（此）.text（（（索引+1）*10）+不带数字的text）；
//向累加器追加文本
valueacculator.push（$（this.text（））；
});
//querystring可在querystring之后剥离所有内容
变量重新查询字符串=/\？列表\=.*$/；
//占位符
var linkWithoutQueryString=''；
//移除查询字符串
linkWithoutQueryString=$（'#myLink'）.attr（'href'）.replace（reQueryString'）；
//更改链接以包含URL编码的值列表
$（'#myLink'）.attr（'href'，linkWithoutQueryString+“？list=“+encodeURI（valueacculator.join（'124;'）））；
}
$（文档）.ready（函数（）{
//使列表可排序，每次排序停止时，运行listChanger功能
$（“#myList”）.sortable（{stop:listChanger}）；
});

10个苹果

20香蕉

30橙色

文本字符串前面的值应始终类似于

（$（this）.index（）+1）*10

？顺便说一句，为了便于访问，我强烈建议将该数字包装在另一个元素中，可能是

span

，以避免正则表达式（否则不可避免）带来的麻烦。