maintain sequence of a Ul Li list

Question

I have a ul li list which has the option to sort and move the elements up and down. My requirement is that once the user sorts the elements in the desired fashion I want to be able to save that sequence in the DB as well.

Is it possible for me to get an array which contains the id the li and the index of the position of that li .

eg. in this case, when value = 9 , index should be 0,
value = 11, index = 1 etc.

Sample html rendered is:

 <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

get an array which contains the id the li and the index of the position of that li .

.map() can be used in conjunction with .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

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

This should point you in the right direction. Simply replace the div with the ul in question...

Or, writing code for you in jsFiddle... http://jsfiddle.net/

Answer 3

Use this:

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

Output:

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

Answer 4

First of all you need to get each value, then you need to build the array and serialise it, finally you can save it with an Ajax call. Here is a 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);
        }
    });
});

Answer 5

Refer below answer

 $(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> 

You will get the index value, after below lines

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

if you print console.log(input) you will get array index