时间戳

首页 > 解决方案 > 位置改变时如何获取列表项的索引值

javascript - 位置改变时如何获取列表项的索引值

问题描述

我正在使用 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);
                    }
                }
            });

        }
    });

标签： javascriptjquery

解决方案

您可以将 jQuery函数与作为事件第二个参数的属性提供的jQuery.index()函数结合使用。itemupdate

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}` );
  },
})
<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>

除此之外，您可以将每个项目的索引存储在列表中，然后在更新后进行比较以查看哪些项目更改了位置。您甚至可以使用 jQuery 的.data()来存储项目的先前位置，尽管我认为如果您遵循MVC 设计原则或其中的许多变体，从长远来看，您会得到更好的服务。

推荐阅读