javascript - maintain sequence of a Ul Li list -
i have ul li list has option sort , move elements , down. requirement once user sorts elements in desired fashion want able save sequence in db well.
is possible me array contains id li , index of position of li.
eg. in case, when value = 9 , index should 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>
get array contains id li , index of position of li.
.map() can used in conjunction .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>
Comments
Post a Comment