Javascript 使用jquery更新列表顺序

我有HTML代码：

<ul>
    <li>Item 1: <button id="down_1">Down</button></li>
    <li>Item 2: <button id="down_2">Down</button><button id="up_2">Up</button></li>
    <li>Item 3: <button id="down_3">Down</button><button id="up_3">Up</button></li>
    <li>Item 4: <button id="down_4">Down</button><button id="up_4">Up</button></li>
    <li>Item 5:                                  <button id="up_5">Up</button></li>
</ul>

项目1：向下
项目2：下载
项目3：下载
项目4：下载
项目5：向上

并希望使用jQuery来更新列表顺序

<script>
    $(document).ready(function() {
        $('[id^="down_"]').each(function() {
            var id = this.id;
            $('#' + id).click(function() {
                ///A code to change this <li>..</li> with the next one??
            });
        });
        $('[id^="up_"]').each(function() {
            var id = this.id;
            $('#' + id).click(function() {
                ///A code to change this <li>..</li> with the previous one??
            });
        });
    });
</script>

$（文档）.ready（函数（）{
$（'[id^=“down\”）。每个（函数（）{
var id=this.id；
$（'#'+id）。单击（函数（）{
///将此
更改为下一个的代码？？
});
});
$（'[id^=“up”]'）。每个（函数（）{
var id=this.id；
$（'#'+id）。单击（函数（）{
///将此
更改为上一个
的代码？？
});
});
});

如何编写更改订单的JavaScript/jQuery代码？例如，如果我按下id为“down_3”的按钮，则结果为：

<ul>
    <li>Item 1: <button id="down_1">Down</button></li>
    <li>Item 2: <button id="down_2">Down</button><button id="up_2">Up</button></li>
    <li>Item 4: <button id="down_4">Down</button><button id="up_4">Up</button></li>
    <li>Item 3: <button id="down_3">Down</button><button id="up_3">Up</button></li>
    <li>Item 5:                                  <button id="up_5">Up</button></li>
</ul>

项目1：向下
项目2：下载
项目4：下载
项目3：下载
项目5：向上

胡乱猜测

$(document).ready(function() {
    $('[id^="up_"]').on('click', function() {
        var li = $(this).closest('li');
        li.prev('li').before(li);
    });

    $('[id^="down_"]').on('click', function() {
        var li = $(this).closest('li');
        li.next('li').after(li);
    });
});

胡乱猜测

$(document).ready(function() {
    $('[id^="up_"]').on('click', function() {
        var li = $(this).closest('li');
        li.prev('li').before(li);
    });

    $('[id^="down_"]').on('click', function() {
        var li = $(this).closest('li');
        li.next('li').after(li);
    });
});

---

相反，您可以使用

.on（）

用于分类

<script type="text/javascript">
    $(function(){
        $('[id^="down_"],[id^="up_"]').on('click',function(){
            var row = $(this).parents("li:first");
            if ($(this).is(".up"))
            {
                row.insertBefore(row.prev());
            }
            else
            {
                row.insertAfter(row.next());
            }
        });
    });
</script>

$（函数（）{
$（'id^=“down”]，[id^=“up”]）。在（'click'，function（）上{
var行=$（this）.parents（“li:first”）；
如果（$（this）.is（“.up”））
{
row.insertBefore（row.prev（））；
}
其他的
{
row.insertAfter（row.next（））；
}
});
});

---

相反，您可以使用

.on（）

用于分类

<script type="text/javascript">
    $(function(){
        $('[id^="down_"],[id^="up_"]').on('click',function(){
            var row = $(this).parents("li:first");
            if ($(this).is(".up"))
            {
                row.insertBefore(row.prev());
            }
            else
            {
                row.insertAfter(row.next());
            }
        });
    });
</script>

$（函数（）{
$（'id^=“down”]，[id^=“up”]）。在（'click'，function（）上{
var行=$（this）.parents（“li:first”）；
如果（$（this）.is（“.up”））
{
row.insertBefore（row.prev（））；
}
其他的
{
row.insertAfter（row.next（））；
}
});
});

---

一种略为替代的方法：

---

请注意，为了便于选择，我已将

id

s更改为共享类名。

一种略为替代的方法：

---

请注意，为了便于选择，我已将

id

s更改为共享类名。

您是否意识到网站不允许问题以“Hi”开头是有原因的？此外，您为什么要将

click

事件绑定到循环中？这正是jQuery强大的原因，它的选择器引擎已经针对这种功能进行了优化。///一段代码来更改此

。

与下一个一起使用？？这是什么意思？请解释。@Sangeeta我想他想用“向上”按钮在列表中向上移动列表项，用“向下”按钮向下移动列表项（与上一项或下一项交换）。@user2157361是的，那么为什么你认为“H_I”会更好呢？它会删除这些短语，因为它们是不允许的。您知道网站不允许问题以“Hi”开头是有原因的吗？另外，为什么要将

单击
事件绑定到循环中？这正是jQuery强大的原因，它的选择器引擎已经针对这种功能进行了优化。///一段代码来更改此
。
与下一个一起使用？？这是什么意思？请解释。@Sangeeta我想他想用“向上”按钮在列表中向上移动列表项，用“向下”按钮向下移动列表项（与上一项或下一项交换）。@user2157361是的，那么为什么你认为“H_I”会更好呢？它会删除短语，因为它们是不允许的。如果我移动到最后一行，如何删除向下按钮并将向下按钮添加到下一行？第一行也是如此。谢谢。@user2157361-如果我移到最后一行，我会像这样解决这个问题。如何删除向下按钮并将向下按钮添加到下一行？第一行也是如此。谢谢。@user2157361-我会像这样解决这个问题