首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用jQuery重新排序div位置?

在jQuery中,可以使用sort()方法对div元素进行排序。但是,这种方法不会更改原始HTML文档的结构,而是返回一个新的排序后的div元素集合。因此,您需要将排序后的div元素插入到原始div元素的末尾,如下所示:

代码语言:html
复制
<div id="myDiv">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<script>
  // 获取 div 元素
  var myDiv = document.getElementById("myDiv");

  // 将 div 元素插入到原始 div 元素的末尾
  myDiv.parentNode.insertBefore(myDiv.childNodes, myDiv);

  // 使用 sort() 方法对 div 元素进行排序
  myDiv.querySelectorAll("div").sort(function(a, b) {
    return parseInt(a.textContent) - parseInt(b.textContent);
  });
</script>

在上面的代码中,我们首先使用getElementById()方法获取要排序的div元素,然后使用insertBefore()方法将排序后的div元素插入到原始div元素的末尾。最后,我们使用querySelectorAll()方法获取要排序的div元素集合,并使用sort()方法按文本内容进行排序。

需要注意的是,sort()方法会直接修改原始集合,而不是返回一个新的排序后的集合。因此,如果您需要保留原始集合的顺序,则应该使用for循环来遍历集合,并手动比较每个元素并进行排序,如下所示:

代码语言:javascript
复制
// 获取 div 元素
var myDiv = document.getElementById("myDiv");

// 将所有 div 元素添加到一个新的集合中
var divs = [];
var children = myDiv.children;
for (var i = 0; i < children.length; i++) {
  divs.push(children[i]);
}

// 对新集合中的所有元素进行排序
divs.sort(function(a, b) {
  return parseInt(a.textContent) - parseInt(b.textContent);
});

// 将排序后的元素插入到原始 div 元素的末尾
myDiv.appendChild(divs[0]);
for (var i = 1; i < divs.length; i++) {
  myDiv.appendChild(divs[i]);
}

在上面的代码中,我们首先使用children属性获取所有子元素,并将它们存储在一个新的集合中。然后,我们使用sort()方法对新集合中的所有元素进行排序。最后,我们使用appendChild()方法将排序后的元素一个一个地添加到原始div元素的末尾。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    ,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等...jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义边栏的。...我们平时接触的插件的参数,都是直接跟着参数写上参数值,这个比较直观简单。在这个插件中,参数值太多,所以把一些参数合并起来写。...如果想使其重新可用,调用 update方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。...这当然是无法 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。

    14.1K30

    最新jquery+easyui_api培训文档

    类来显示在面板中的16x16图标 null width 数字 设置面板的宽度 auto height 数字 设置面板的高度 auto left 数字 设置面板左侧位置 null top 数字 设置面板的顶部位置...false border 布尔 定义面板的边框 true doSize 布尔 当设置为true,面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false...; top: 新面板的顶部位置 move options 移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置 11 Tabs(标签) 11.1 实例...none 返回树的所有参数对象 loadData data 加载树的数据 reload none 重新加载树的数据 getRoot none 返回树的root节点 getRoots none 返回树的所有...Name Parameter Description options none 返回所有参数的对象 getPager none 返回分页对象 resize none 调整表格大小 reload param 重新加载行

    3.2K40

    jQuery EasyUI 详解

    DataGrid 数据表格,扩展自 $.fn.panel.defaults , $.fn.datagrid.defaults 重写了 defaults 。...{} sortName string 定义可以排序的列。 null sortOrder string 定义列的排序顺序,只能用 asc 或 desc。...undefined align string 指如何对齐此列的数据,可以 left、right、center。 undefined sortable boolean True 就允许此列被排序。...onSortColumn sort, order 当用户对一列进行排序时触发,参数包括: sort:排序的列的字段名order:排序的列的顺序 onResizeColumn field, width 当用户调整列的尺寸时触发...reload param 重新加载行,就像 load 方法一样,但是保持在当前页。 reloadFooter footer 重新加载脚部的行。 loading none 显示正在加载状态。

    9.2K10

    JavaScript的理解记录(5)

    类库中的()相似,两者参数相同,不同的是:()返回值为一个JQuery对象表示匹配的元素集,JQuery对象是一个类数组,可以标准的数组标示方括号来访问JQuery对象的内容;也可以toArray(...)方法来将JQuery对象转化为真实的数组; 参数举例:1、ID: #nav 2、 标签名:div 3、class属性值:.success 4、基于属性值:input[name='button']; 5...,第二个参数是该父节点的子节点,可以为null,为null是功能与appendChild相同;                如果使用以上两个方法再次插入已经存在的节点,已存在节点将会自动从它的当前位置删除并在新的位置从新插入...,可以用来做单页表格的排序等,不改变表格数据,只改变节点的顺序;          3、删除和替换节点:删除节点:removeChild() 替换节点:replaceChild();         ...         其二:设置对应元素的JavaScript contenteditable属性;         浏览器定义了多项文本编辑命令,为了执行这些命令,应该使用Document

    1.4K20

    jQuery设计思想

    五、元素的操作:移动 jQuery设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。...两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 $.grep() 返回数组中符合某种标准的元素。...$.isPlainObject() 判断某个参数是否为"{}"或"new Object"建立的对象。 $.support() 判断浏览器是否支持某个特性。...$('p').fadeOut(300, function() { $(this).remove(); }); 更复杂的特效,可以.animate()自定义。

    2.2K60

    datatables应用程序接口API

    ) ajax.url().load()API 设置新的url数据源重新加载数据 ajax.url()API 设置新的url数据源 draw()API 重绘表格 $()API 在整个表格里执行(完成)一个...多行对象 rows.add()DT 添加多行 表格(Tables) 名称 说明 table().body()DT 得到表格 tbody节点 table().container()DT 得到表格的容器 div...如果是一次性初始化多个表格,使用类选择器,或者table标签选择初始化,使用下列方法,table()针对单个table,tables()针对多个table tables().containers()DT 得到表格的容器 div...从结果集中找匹配的值,返回找到个数 iterator()DT 遍历表格、列,行,单元格结果集 join()DT 给结果集数据以字符连接然后返回一个字符串 lastIndexOf()DT 返回与字符相匹配第一次出现的位置...splice()DT 对结果集进行分割 to$()DT 转为jquery实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique

    4.4K30

    jQuery选择器和选取方法

    提取选中元素最简单的方式是按位置提取。first()返回的jQuery对象仅包含选中元素中的第一个,last()返回的jQuery对象则只 包含最后一个元素。...add()会移除重复元素,并对该组合选区进行排序,以便里面的元素按照文档 中的顺序排列: //选取所有和所有元素的等价方式 $("div, p")             //使用选择器组...jQuery还定义一些其他选取方法可将当前选中元素集作为上下文来使 。...与add()方法类似,会移除重复元素并进行排序,以便元素会按照在文档中出现的顺序排列好。 该类别选取方法中最通用的是find()。...指定的元素会成为新的选中元素,之前选中的元素集则会压入栈中,之后可以end()方法还原它们: var sel = $("div");             //选取所有元素 sel.pushStack

    5.2K40

    jquery 使用方法

    5 $('div:gt(2)')//选择所有的div元素,除了前三个 6 $('div:animated')//选择当前处于动画状态的div元素 二、改变结果集 如果选中多个元素,jQuery...五、元素的操作:移动     如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。 假定我们选中了一个div元素,需要把它移动到p元素后面。...两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...3 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 4 $.grep() 返回数组中符合某种标准的元素。...$('p').fadeOut(300, function(){$(this).remove(); }); 更复杂的特效,可以.animate()自定义。

    1.6K10

    如何在已有的 Web 应用中使用 ReactJS

    jQuery 到 React 我最近的任务是 React 重构一个使用 jQuery 写的功能。这个过程困难重重,因为大量的 jQuery 分散在代码段中。...无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery,你所做的事情和开发者多年来所做的事情是一样的: 渲染 HTML > 接收用户事件 > 重新渲染 HTML...所以,如果你的代码是 jQuery 或者其它框架所写,那么应该如何使用 React 去替换这些 UI 片段?...比如,从页面其它位置的日期下拉框中更新日历。 菜单和日历在不同的容器中,但是它们的状态是共享的。 我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。... jQuery 实现共享状态 使用 jQuery 可以很容易实现,但是,如果一个区域动态影响另一个单独使用选择器的区域时,可能会变得混乱。

    14.5K00

    如何在现有的 Web 应用中使用 ReactJS

    jQuery 到 React 我最近的任务是 React 重构一个使用 jQuery 写的功能。这个过程困难重重,因为大量的 jQuery 分散在代码段中。...无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery,你所做的事情和开发者多年来所做的事情是一样的: 渲染 HTML > 接收用户事件 > 重新渲染 HTML...所以,如果你的代码是 jQuery 或者其它框架所写,那么应该如何使用 React 去替换这些 UI 片段?...比如,从页面其它位置的日期下拉框中更新日历。 菜单和日历在不同的容器中,但是它们的状态是共享的。 我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。... jQuery 实现共享状态 使用 jQuery 可以很容易实现,但是,如果一个区域动态影响另一个单独使用选择器的区域时,可能会变得混乱。

    7.8K40

    jQuery基本操作

    ’) //选择所有的div元素,除了前三个 $(‘div:animated’) //选择当前处于动画状态的div元素 二、改变结果集 jQuery设计思想之二,就是提供各种强大的过滤器,对结果集进行筛选...(‘form’); //选择离div最近的那个form父元素   (‘div’).children(); //选择div的所有子元素    三、链式操作 jQuery设计思想之三,就是最终选中网页元素以后...五、元素的操作:移动 jQuery设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。...)​和​.append()​: 在现存元素的内部,从后面插入元素 ​.prependTo()​和​.prepend()​: 在现存元素的内部,从前面插入元素 六、元素的操作:复制、删除和创建 除了元素的位置移动之外...两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用​.empty()​。

    8510
    领券