javascript - 使用 jquery 更新列表顺序

Question

我有 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>

并想使用 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>

如何编写用于更改顺序的 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>

Answer 1

胡乱猜测 ？

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

小提琴

Answer 2

相反，您可以使用.on()

$('[id^="down_"]').on('click',function() {  });

并用于排序。

<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>

Demo

Answer 3

@adeneo 答案的一种稍微替代的方法：

$('li button.down, li button.up').click(
    function (e) {
        e.preventDefault();
        var that = $(this),
            li = that.closest('li'),
            direction = that.hasClass('down');
        li[direction ? 'insertAfter' : 'insertBefore'](direction ? li.next() : li.prev());
    });

JS 小提琴演示。

id请注意，为了便于选择，我已将 s 更改为共享类名。