维护Ul-Li列表的顺序
maintain sequence of a Ul Li list
我有一个ul
li
列表,它可以选择对元素进行排序和上下移动。我的要求是,一旦用户以所需的方式对元素进行排序,我希望能够将该序列也保存在DB中。
我是否可以得到一个数组,其中包含id li
和该li
的位置索引。
例如。在这种情况下,当值=9时,index应为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>
获取一个数组,该数组包含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>
使用此:
var a = [];
$('#ul_li_SubCategories li').each(function(i){
a.push($(this).val());
});
console.log(a);
输出:
[9, 11, 12, 22, 13, 55, 62]
如何使用jQuery迭代div的子元素?
这应该为你指明正确的方向。只需将div
替换为有问题的ul
。。。
或者,在jsFiddle中为您编写代码。。。http://jsfiddle.net/
首先需要获取每个值,然后需要构建数组并对其进行串行化,最后可以通过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);
}
});
});
参考以下答案
$(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)
,您将获得数组索引
相关文章:
- 如何随机显示列表项的顺序
- 对Soundcloud自定义播放器播放列表的顺序进行排序
- 如何在角度js的自动完成下拉列表中对项目列表(按字母顺序)进行排序
- 如何根据 js 中每个单词的第 n 个字母按字母顺序排列列表
- 按调用顺序返回由Ajax/HTTP生成的数据列表
- 插入按字母顺序、javascript或jquery排序的新列表
- Mvc4将Jquery可排序列表项的顺序保持到控制器
- 按字母顺序排列列表
- 如何根据GeoJSON属性中的ID号设置下拉列表项的顺序
- 如何跟踪有序列表中的顺序,该列表具有一个循环列表项,提供不同的参数
- 链接的自定义顺序列表
- 从下拉列表中的数组中选取某个项目,然后将其显示为第一项并按字母顺序显示
- 当列表长度未知时按顺序调用 http.get
- 按数字顺序排列列表
- Javascript Regex - word 必须与列表中的任何单词匹配,以任何顺序,带有单词边界
- 如何更改窗体中列表项的顺序
- 保留列表中移动元素的顺序
- 日期的顺序列表如何从对象获取
- 使用角度 js 按顺序列表排序
- 通过JavaScript读取拖放顺序列表