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 圆形旋转图片滚动切换效果
Jan 19 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP设置进度条的方法
2015/07/08 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
js实现圆盘记速表
2015/08/03 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python 显示数组全部元素的方法
2018/04/19 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
学前教育求职自荐信范文
2013/12/25 职场文书
面料业务员岗位职责
2013/12/26 职场文书
目标管理责任书
2014/04/15 职场文书
党支部综合考察材料
2014/05/19 职场文书
同学会邀请函模板
2015/01/30 职场文书
志愿者个人总结
2015/03/03 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python