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 相关文章推荐
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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字符串的连接的简单实例
2013/12/30 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
使用JavaScript破解web
2018/09/28 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
python复合条件下的字典排序
2020/12/18 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
某公司部分笔试题
2013/11/05 面试题
2014年教师节国旗下讲话稿
2014/09/10 职场文书
自荐信范文
2019/05/20 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python