Question

我正在使用jQuery Sortable，并且我只想获取列表项的更改索引值。有什么办法吗？现在，我正在获得所有索引的价值并更新数据。我只想获取li的变化索引值的位置。这是我的jQuery脚本

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

    $(function () {

        $("ul").sortable({
            items: "li",
            cursor: 'move',
            update: function () {
                sendOrderToServer();
            }
        });

        function sendOrderToServer() {

            var order = [];
            $('li').each(function (index, element) {
                order.push({
                    position: index + 1
                });
            });

            $.ajax({
                type: "GET",
                dataType: "json",
                url: `${SiteConfig.staticContentBaseUrl}/sortabletable`,
                data: {
                    order: order,
                    _token: $('meta[name=csrf-token]').attr('content')
                },
                success: function (response) {
                    if (response.status == "success") {
                        console.log(response);
                    } else {
                        console.log(response);
                    }
                }
            });

        }
    });

Answer 1

您可以将jQuery的.index()函数与item结合使用，而let $pets = $("#pets"), $report = $("#report"); $pets.sortable({ update(e, ui){ let $item = ui.item, index = $pets.children().index($item) + 1; $report.text( `You ranked ${$item.text()} at number ${index}` ); }, })是update event's second argument上的一个属性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<h2>Desired Pets: Rank from most desired (top) to least (bottom)</h2>
<ul id="pets">
<li>Cat</li>
<li>Dog</li>
<li>Hamster</li>
<li>Rabbit</li>
<li>Fox</li>
</ul>
<div id="report"></div>

{{1}}

除此之外，您可以将每个项目的索引存储在列表中，然后在更新后进行比较以查看哪些项目更改了位置。您甚至可以使用jQuery的.data()来存储该项目的先前位置，尽管从长远来看，如果您遵循MVC design principles或其中的一种变化，则最好为您服务。< / p>

列表项位置更改时如何获取索引值

1 个答案: