維護Ul Li列表的順序

Question

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

Answer 1

得到含有該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> 

Answer 2

如何使用jQuery遍歷div的子元素？

這應該為您指明正確的方向。 只需更換div與ul的問題...

或者，在jsFiddle中為您編寫代碼... http://jsfiddle.net/

Answer 3

用這個：

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

輸出：

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

Answer 4

首先，您需要獲取每個值，然后需要構建數組並將其序列化，最后可以通過Ajax調用將其保存。 這是一個JSFiddle完成

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

Answer 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)您將獲得數組索引