首页
学习
活动
专区
工具
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元素的末尾。

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

相关·内容

领券