Javascript实现数组中的元素上下移动


Posted in Javascript onApril 28, 2017

前言

我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子

在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代码如下,比较重要的是那个函数。

示例代码:

// 交换数组元素
  var swapItems = function(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
  };
 
  // 上移
  $scope.upRecord = function(arr, $index) {
    if($index == 0) {
      return;
    }
    swapItems(arr, $index, $index - 1);
  };
 
  // 下移
  $scope.downRecord = function(arr, $index) {
    if($index == arr.length -1) {
      return;
    }
    swapItems(arr, $index, $index + 1);
  };

合理使用那个方法,可以实现置顶和最底的一些实现。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
一个网马的tips实现分析
Nov 28 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
JS简单判断滚动条的滚动方向实现方法
Apr 28 #Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
jquery实现图片上传前本地预览
Apr 28 #jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 #Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 #Javascript
You might like
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php无限遍历目录示例
2014/02/21 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
node.js实现端口转发
2016/04/14 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
python开发中range()函数用法实例分析
2015/11/12 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python3实现mysql导出excel的方法
2019/07/31 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
中餐厅主管的职责范文
2014/02/04 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS