元素的上移、下移等排序操作

最近一些项目中,我经常遇到对元素进行排序操作的需求,包括:上移、下移、置顶、置底。那么这些操作如何实现呢?

上移,简言之就是将需要上移的元素和它前面元素交换位置,使用insertBefore(),大致思路为:

var dom=需要上移的元素;
var domPrev=dom.prev();
dom.insertBefore(domPrev);

下移,类似上移,将需要下移的元素和它后面的元素交换位置,使用insertAfter(),大致思路为:

var dom=需要下移的元素;
var domNext=dom.next();
dom.insertAfter(domNext);

置顶,将需要置顶的元素变成其父元素的第一个孩子,使用prependTo(),大致思路为:

var dom=需要置顶的元素;
var domParent=dom.parent();
dom.prependTo(domParent);

置底,类似置顶,将需要置底的元素变成其父元素的最后一个孩子,使用appendTo(),大致思路为:
var dom=需要置底的元素;
var domParent=dom.parent();
dom.appendTo(domParent);

通过insertBefore(),insertAfter(),prependTo(),appendTo()就能实现元素的这些简单排序操作。
时间: 2024-10-23 17:20:50

元素的上移、下移等排序操作的相关文章

利用jQuery操作select列表选项的上移下移示例

导读:本文实现了一个简单的select列表选项的上移下移操作,可帮助读者了解jQuery选择器,节点操作的一些常用方法 实现的效果: 分享代码: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MoveNode_Default" %> 2 3 <!DOCTYPE html PUBLIC &

php修改排序,上移下移

php修改排序,上移下移 /**  $UpDown //移动方向,up或down  $table //表名  $id //当前移动的ID  $id_col //ID字段的名称  $oc_col //排序字段的名称  $where //条件 */ function MoveUpDown($UpDown,$table,$id,$id_col='id',$oc_col='OrderColumn',$where='')  {    if($UpDown=='up'){$op='<';$desc='des

上移下移扩展版 【总结】

需求 上移下移 需求: 1)点击上移就将当前的按钮的父级上移一位 2)当点击第一个时候将当前按钮的父级移动到最后一位 3)当点击最后一个时候将当前按钮的父级移动到首位 4)带过渡动画 需求分析: 下移:剪切所点击的条目插入到下一条目后面 上移:剪切所点击的条目插入到上一条目前面 过渡效果实现:CSS3的transition 或 js实现 实现思路: transition实现方法,先在CSS里设置好transition: 1s top; 这个样式,然后鼠标点击修改top值触发过渡效果. 需要用js

对vector等STL标准容器进行排序操作(转!)

西方有句谚语:不要重复发明轮子! STL几乎封装了所有的数据结构中的算法,从链表到队列,从向量到堆栈,对hash到二叉树,从搜索到排序,从增加到删除......可以说,如果你理解了STL,你会发现你已不用拘泥于算法本身,从而站在巨人的肩膀上去考虑更高级的应用. 排序是最广泛的算法之一,本文详细介绍了STL中不同排序算法的用法和区别. 1 STL提供的Sort 算法 C++之所以得到这么多人的喜欢,是因为它既具有面向对象的概念,又保持了C语言高效的特点.STL 排序算法同样需要保持高效.因此,对于

JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; cha

AngularJS实现数据列表的增加、删除和上移下移等功能实例

转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看. 效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head&g

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

怎么实现元素ol的降序排序显示

首先介绍一下什么是ol元素.这里直接引用MDN里面的定义:The HTML <ol> Element (or HTML Ordered List Element) represents an ordered list of items.也就是说这个元素的包含的li元素是带有数字序号的.为了更好阐述下面介绍的几种方法,我们首先写出一个有序列表: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=

简化版桶排序操作模版

1 //简化版的桶排序,时间复杂度为O(2*(m+n))->O(m+n) 2 //处理的问题:随机输入几组数,对这几组数进行自动排序操作(从小到大或从大到小排序) 3 #include <bits/stdc++.h> 4 using namespace std; 5 inline int read() 6 { 7 int x=0,f=1; 8 char ch=getchar(); 9 while(ch<'0'||ch>'9') 10 { 11 if(ch=='-') 12 f