维护一个 Ul Li 列表的序列答案

【问题标题】：maintain sequence of a Ul Li list维护一个 Ul Li 列表的序列
【发布时间】：2015-09-11 23:14:33
【问题描述】：

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

我是否有可能获得一个数组，其中包含 id li 和该 li 的位置索引。

例如。在这种情况下，当 value = 9 时，索引应为 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>

【问题讨论】：

你需要什么？获取每个值还是将它们保存在数据库中？
获取该值对应的索引并插入到DB中
@GauravSachdeva 检查我对您上一个问题的未经编辑的答案，stackoverflow.com/questions/31046590/…
@GauravSachdeva 无论如何我在这里发布了答案，参考

标签： javascript jquery html

【解决方案1】：

How do I iterate through child elements of a div using jQuery?

这应该为您指明正确的方向。只需将div 替换为有问题的ul...

或者，在 jsFiddle 中为您编写代码...http://jsfiddle.net/

【讨论】：

为什么投反对票？这不是问题的确切答案吗？
我没有投反对票... :o
哈哈...不是在指责你，而是有人反对...总是好奇为什么。

【解决方案2】：

获取一个数组，其中包含 id li 和该 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>

【讨论】：

【解决方案3】：

使用这个：

var a = [];
$('#ul_li_SubCategories li').each(function(i){
    a.push($(this).val());
});
console.log(a);

输出：

 [9, 11, 12, 22, 13, 55, 62]

【讨论】：

【解决方案4】：

首先您需要获取每个值，然后您需要构建数组并对其进行序列化，最后您可以使用 Ajax 调用保存它。这是JSFiddle complete

$(document).ready(function() {
    var items = [];

    $('#ul_li_SubCategories > li').each(function () {
        items.push({
            value : $(this).attr('value'),
            index : $(this).index()
        });
    });

    $.ajax({
        url: "your url to save the items",
        type: "POST",
        data: items,
        success:function(result){
            alert(result);
        },
        error:function(xhr,status,error){
            alert(status);
        }
    });
});

【讨论】：

【解决方案5】：

参考下面的答案

    
    $(function(){

$('.glyphicon-arrow-up').on('click', function(e){
   e.preventDefault();
    var _this = $(this);
    var _parent = _this.closest('ul');
    var _child = $(_parent).find('li');
    var selected= $(this).closest('li').index();
    jQuery($(_parent).children().eq(selected-1)).before(jQuery($(_parent).children().eq(selected)));

    var _child = _this.closest('ul').children();
    var _childLength = _child.length;

    var input = Array();
    $.each(_child, function(key, val){
        input[key] = $(val).data('id');
    })
     // Use below if required to update into database
    $.ajax({
        url: 'ajax.php',
        data:{
            'inputArray':input,
            'queryString':'updatePrecedence',
        },
        type: "POST",
        dataType : 'JSON',
        success: function(data){
        }
    });
});

$('.glyphicon-arrow-down').on('click', function(e){
   e.preventDefault();
    var _this = $(this);
    var _parent = _this.closest('ul');
    var _child = $(_parent).find('li');
    var selected= $(this).closest('li').index();

    jQuery($(_parent).children().eq(selected+1)).after(jQuery($(_parent).children().eq(selected)));
    selected=selected+1;

    var _child = _this.closest('ul').children();
    var _childLength = _child.length;

    var input = Array();
    $.each(_child, function(key, val){
        input[key] = $(val).data('id');
    })

   // Use below if required to update into database
    $.ajax({
        url: 'ajax.php',
        data:{
            'inputArray':input,
            'queryString':'updatePrecedence',
        },
        type: "POST",
        dataType : 'JSON',
        success: function(data){
        }
    });

});

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li>Sample 1 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 2 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 3 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 4 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 5 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 6 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
	<li>Sample 7 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li>
</ul>

你会在下面几行之后得到索引值

var input = Array();
    $.each(_child, function(key, val){
        input[key] = $(val).data('id');
    })

如果你打印console.log(input)，你会得到数组索引

【讨论】：