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>

What do you need? To get each values or to save them in the DB? — michelem, Jun 25 '15 at 11:20
@GauravSachdeva check my unedited answer on your previous question, http://stackoverflow.com/questions/31046590/move-items-in-ul-li-up-and-down — Anto S, Jun 25 '15 at 11:59

score 3 · Accepted Answer · answered Jun 25 '15 at 11:21

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>

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

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/

edited May 23 '17 at 10:26

Community

1
1

answered Jun 25 '15 at 11:16

John Chrysostom

3,973
1
34
50

Why the downvoting? Is this not the exact answer to the question? – John Chrysostom Jun 25 '15 at 11:17
I didnt do any downvoting... :o – Gaurav Sachdeva Jun 25 '15 at 11:20
Haha... not accusing you, but somebody downvoted... Always curious as to why. – John Chrysostom Jun 25 '15 at 11:31

score 1 · Answer 3 · answered Jun 25 '15 at 11:21

1

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]

answered Jun 25 '15 at 11:21

n-dru

9,285
2
29
42

michelem · Answer 4 · 2015-06-25T11:47:13.077

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

score 0 · Answer 5 · answered Jun 25 '15 at 12:02

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

maintain sequence of a Ul Li list

5 Answers5