javascript - 维护 Ul Li 列表的序列

Question

我有一个 ul li 列表，它可以选择对元素进行排序和上下移动。我的要求是，一旦用户以所需的方式对元素进行排序，我也希望能够将该序列保存在数据库中。

我有没有可能得到一个数组，其中包含 li 的 id 和 li 的位置索引。

例如。在这种情况下，当 value = 9 时，index 应该是 0,
值 = 11，索引 = 1 等。

呈现的示例 html 是:

 <ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0">
    <li sequence="1" title="Category 1" class="liEllipsis" value="9"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li>
    <li sequence="2" title="Category 3" class="liEllipsis" value="11"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a></li>
    <li sequence="4" title="Category 4" class="liEllipsis" value="12"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a></li>
    <li sequence="5" title="Category 6" class="liEllipsis" value="22"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a></li>
    <li sequence="6" title="Category 5" class="liEllipsis" value="13"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a></li>
    <li sequence="7" title="Category 7" class="liEllipsis" value="55"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a></li>
    <li sequence="99999" title="Category 8" class="liEllipsis" value="62"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a></li>
</ul>

Answer 1

获取一个数组，其中包含 li 的 ID 和该 li 的位置索引。

.map()可与 .attr() 结合使用

var arr = $('#ul_li_SubCategories li').map(function (elem) {
    return {
        value : $(this).attr('value'),
        index : $(this).index()
    }
}).get();

$(function() {
  var arr = $('#ul_li_SubCategories li').map(function(elem) {
    return {
      value: $(this).attr('value'),
      index: $(this).index()
    }
  }).get();
  
  console.log(arr)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0">
  <li sequence="1" title="Category 1" class="liEllipsis" value="9"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a>
  </li>
  <li sequence="2" title="Category 3" class="liEllipsis" value="11"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a>
  </li>
  <li sequence="4" title="Category 4" class="liEllipsis" value="12"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a>
  </li>
  <li sequence="5" title="Category 6" class="liEllipsis" value="22"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a>
  </li>
  <li sequence="6" title="Category 5" class="liEllipsis" value="13"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a>
  </li>
  <li sequence="7" title="Category 7" class="liEllipsis" value="55"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a>
  </li>
  <li sequence="99999" title="Category 8" class="liEllipsis" value="62"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a>
  </li>
</ul>