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

使用jQuery each()重新排序DOM元素顺序

使用jQuery each()重新排序DOM元素顺序可以通过以下步骤实现:

  1. 首先,使用jQuery选择器选择要重新排序的DOM元素的父元素,例如使用类选择器选择所有需要重新排序的元素的父元素:$('.parent-element')
  2. 使用jQuery的each()方法遍历选中的父元素下的所有子元素,例如:$('.parent-element').children().each(function(index, element) { ... })
  3. 在each()方法的回调函数中,可以获取到当前遍历的子元素以及其索引。根据需要的排序逻辑,可以使用jQuery的insertBefore()或insertAfter()方法将子元素插入到正确的位置。
  4. 最后,可以使用jQuery的detach()方法将重新排序后的子元素从父元素中移除,并使用appendTo()或prependTo()方法将其重新插入到父元素中,以完成DOM元素的重新排序。

以下是一个示例代码:

代码语言:javascript
复制
$('.parent-element').children().each(function(index, element) {
  // 根据需要的排序逻辑,例如按照子元素的某个属性值进行排序
  // 这里假设子元素有一个data-order属性表示排序顺序
  var order = $(element).data('order');
  
  // 将子元素插入到正确的位置
  $('.parent-element').children().each(function(i, el) {
    if (i > index && $(el).data('order') > order) {
      $(element).insertBefore(el);
      return false; // 结束循环
    }
  });
});

// 将重新排序后的子元素重新插入到父元素中
$('.parent-element').children().detach().appendTo('.parent-element');

这样,使用jQuery each()重新排序DOM元素顺序的操作就完成了。

关于jQuery each()方法的详细说明和用法,可以参考腾讯云的jQuery文档:jQuery.each()方法

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

相关·内容

jquery和原生dom对象的转换&常用函数方法

二、jquery对象的方法 1、.each( function(index, Element) ) //each的参数顺序和js的参数顺序相反 遍历一个jQuery对象,为每个匹配元素执行一个函数 $(...,一般来说对应的元素都是原生dom,要执行jQuery的text方法需要加$转换成jquery对象 2、jQuery.each( collection, callback(indexInArray, valueOfElement...) ) 在jquery中有一种用法\$.each(),其中$==jQuery对象。...,包括所有匹配元素、匹配元素的下级元素、文字节点 通常我们将页面上一个元素插入到DOM里另一个地方,它会被从老地方移走,类似剪切的效果 $('.hello').appendTo('.goodbye');...如果执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的代码放到 load 事件中。

2K30

riot.js教程【三】访问DOM元素使用jquery、mount输入参数、riotjs标签的生命周期

前文回顾 riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可以使用...,(有时候你需要对这些东西做一些特殊的处理才能用) 使用Jquery 如果你想在riot标签内部访问dom元素 你可能需要了解一下riot标签生命周期相关的知识 你会注意到,mount方法还没执行的时候...,dom元素是不会被创建的 这就意味着,mount方法之前访问DOM元素,是不会成功的 请看如下代码: Do I even Exist?...('test3', test3) // Succeeds, fires once (per mount) }) 也就是说,你只要在正确的函数中使用...jquery是一点问题都没有的; 再看下面的代码(两种检索方式都是支持的,第一种就是jquery检索DOM) Do I even Exist

1.6K70

全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

通过 DOM 对 HTML 页面的解析,可以将页面元素解析为元素节点、属性节点和文本节 点,这些解析出的节点对象,即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。...对象中存储的 DOM 对象顺序与页面标签声明位置关系 jQuery对象数组中dom对象的顺序和声明dom对象时的顺序保持一致 1 dom1 2 dom2 <...13.2.7 each函数(常用) each 是对数组、json对象 和 dom 对象等的遍历,对每个元素调用一次函数。...JQuery提供了 each() 方法用于遍历匹配的元素信 element: 数组的对象 : 这个是自定义的数组中的元素的标识符,这个元素可以是普通元素(直接获取)、json对象的value(直接获取)...重点:可以将普通数组对象、dom对象转换为 jQuery对象来使用 each()的语法二进行遍历。 但是 json对象不可以转变为 jQuery对象,只能使用语法一遍历,不可以使用语法二。

5.8K10

最常见的 20 个 jQuery 面试问题及答案

使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...8. jQuery 里的 each() 是什么函数?你是如何使用它的?(答案如下)   each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。...这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。   10....使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...8. jQuery 里的 each() 是什么函数?你是如何使用它的?(答案如下)   each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。

13.7K30

jquery面试题目_高并发面试题

使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...8. jQuery 里的 each() 是什么函数?你是如何使用它的?(答案如下) each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。...你是如何将一个 HTML 元素添加到 DOM 树中的?(答案如下) 你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。...这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。 10....你也还可以看看 用来向DOM中添加元素的 appendTo() 方法. 15. 你如何利用jQuery来向一个元素中添加和移除CSS类?

9.4K10

Jquery 使用技巧总结

元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。...2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。...如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。...集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get (n)和索引返回的是dom元素对象。...对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。

2.8K20

jQuery笔记(3)

jQuery元素操作 主要是遍历,创建,添加,删除元素操作 遍历元素each() jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历 语法1:...$("div").each(function(index, domEle){xxx;}) each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个 里面的回调函数有2个参数,index是每个元素的索引号...,domEle是每个DOM元素对象,不是jQuery对象 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle) 语法2: $.each(object,...() 删除匹配的元素集合中所有的子节点 element.html("") 清空匹配的元素内容(注意里面不能是空的,要加引号) 将匹配的子节点清空 本文由“壹伴编辑器”提供技术支持 jQuery...但是这个导航栏其实是有bug的,比如我们重新刷新页面时,即使页面在很下面,导航栏也没有出现 这是因为我们将它放入了滚动事件中,刚刷新完是没有滚动的,所以自然不会出现,所以我们要将里面的代码封装成函数

65410

jQuery 快速入门教程

使用jQuery 选择器选取元素,并封装为jQuery对象 将现有的DOM元素封装为jQuery对象 将HTML字符串封装为jQuery对象 元素筛选 jQuery 核心:DOM操作的原则...} ); jQuery的ready()函数可以重复调用,绑定的回调函数将在DOM准备就绪后按照绑定顺序依次执行。..., i){ // 注意参数顺序each()不同 // value 表示当前迭代的数组元素或对象的属性值 // i 表示当前迭代元素的索引或对象的属性名称 // this...]; var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序each()不同 // value 表示当前迭代的数组元素...DOM元素jQuery对象的相互转换 在前面我们已经知道如何将DOM元素转换为jQuery对象,以使用jQuery对象的方法对DOM元素进行操作。

13.6K30

jQuery原理(原型上的属性、方法)

push: [].push, // 对实例中的元素进行排序 sort: [].sort, // 按照指定下标指定数量删除元素,也可以替换删除的元素 splice...[].slice.call(this); }, get 取指定下标的元素,获取的是原生DOM get: function (num) { if (arguments.length === 0...,是jQuery类型的实例对象 first: function () { return this.eq(0); }, last:获取实例中的最后一个元素,是jQuery类型的实例对象 last:...function () { return this.eq(-1); }, each 遍历实例,把遍历到的数据传给回调使用 jQuery存在两个each方法,一个类方法,一个对象方法。...: function (fn) { return kjQuery.each(this, fn); }, }; map 遍历实例,把遍历到的数据传给回调使用,然后把回调的返回值收集起来组成一个新的数组返回

94420

第73天:jQuery基本动画总结

一、DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(document...将不同的动画串联在一起按顺序排列执行是非常有用的。...中each方法的应用 jQuery中有个很重要的核心方法each,大部分jQuery方法在内部都会调用each,其主要的原因的就是jQuery的实例是一个元素合集 如下:找到所有的div,并且都设置样式...jQuery的大部分方法都是针元素合集的操作,所以jQuery会提供$(selector).each()来遍历jQuery对象 .each只是处理jQuery对象的方法,jQuery还提供了一个通用的jQuery.each...,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 - 如果在一组元素上调用 .index() ,并且参数是一个DOM元素jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置

3.2K10

jq---方法总结

什么是jQuery使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...{ // 在这里编写我们希望在DOM准备就绪后执行的代码 } ); 4.jQuery 核心:选取元素 $("#uid"); // 选取id属性为"uid"的单个元素 $("p"); // 选取所有的p元素...对象 // 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作,或者将它们插入到文档的指定位置。...}; var resultArray = $.map( obj, function(value, i){ // 注意参数顺序each()不同 // value 表示当前迭代的数组元素或对象的属性值...= $.grep( array2, function(value, i){ // 注意参数顺序each()不同 // value 表示当前迭代的数组元素 // i 表示当前迭代元素的索引 // this

3K20

jQuery最佳实践

(1) $('.child', $parent) 这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。...Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。...少改动DOM结构 (1)改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。...(2)如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时,快了60%。...javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.

1.3K20

jquery要怎么写才能速度最快?(转…

Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。...此外,这两种方法相比传统的.bind()方法还有一个好处,那就是对动态插入的元素也有效,.bind()只对已经存在的DOM元素有效,对动态插入的元素无效。...少改动DOM结构 (1)改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。...(2)如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时,快了60%。...javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.

1.6K30

jQuery操作DOM元素

最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。...("#form1 :disabled");//选取id为form1的表单内所有禁用的元素 常用方法 jQuery的方法只有jQuery对象才可以调用,DOM对象不能调用。...DOM对象和jQuery对象的相互转换 //DOMjQuery var win=$(window);//将window转换为jQuery对象 //jQuery对象win转DOM对象 win.get[0...针对input使用,val()获取元素中的value属性值,value('str')设置元素value属性值为str load() 发送AJAX请求,重新获取标签要呈现的内容$('#lessonList...获取元素的所有子元素(包括子元素的子元素),selector不可省略 each() 遍历元素数组,例:$('p').each(function(){$(this).text('p');}); 结语 以上这些是我在开发过程常用到的一些选择器和方法

2.6K40

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。 一、 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。...如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 ? 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素DOM 对象,想要使用 jQuery 方法需要转换。...注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素DOM 对象,想要使用 jQuery 方法需要转换。...// console.log(domEle); // 使用jQuery方法需要转换 $(domEle)                $(domEle).css("color", arr[i]);...方法操作元素的创建、添加、删除方法很多,我们重点使用部分,如下: 语法总和 ?

2.6K50

jQuery性能优化

优先使用ID与标记选择器 在jQuery中,最快访问DOM元素的方式是通过元素ID号,其次是通过元素的标记。...避免过度使用jQuery对象 在jQuery中,用户每次使用选择器获取页面中的元素时,都会自动生成一个jQuery对象,该对象包括众多的属性和方法,而通过对象自身去调用这些方法时,资源消耗相对要大很多...c,$p); $($p > $c); jQuery内部处理顺序是从右到左,上述其最后两条语句,都是先获取子元素,然后再与多个父元素相匹配 7....正确使用循环语句 for(var i=0; i<arr.length; i++) //原生语句,速度效率更高 $.each(arr,function(){}); console.time("for"...元素的操作 DOM元素操作的原理:先在内存中创建DOM结构,然后更新现有的DOM结构。

84031

jQuery

value属性的值 jQuery和javaScript的区别 1.注意事项: 使用jQuery的方式获取的对象称为jQuery对象; jQuery对象本质上是js对象数组; 使用dom的方式获取的对象称为...dom(js)对象; 两者的方法和属性不能混用; 使用jQuery的方法和属性时,必须保证对象是jquery对象; 2.js对象和jquery对象之间的转换: js对象 → jquery对象 $...方式1:jQuery对象[index] 方式2:jQuery对象.get(index) 3.在3.0版本后jQuery的页面加载成功事件无顺序,是随机的 jQuery2.0前(不含2.0)如1.11版本用的多...,页面加载成功事件有执行顺序,从上到下,js的最后执行,不管将其写到哪个位置。...(function([index],[dom对象]){ }); // index:被遍历到的对象索引 ele: 被遍历到的js对象 2.全局函数 : $.each(要遍历的对象, function

4.3K20
领券