使用jquery对页面上的div元素进行排序答案

【问题标题】：Sort div elements on page using jquery使用jquery对页面上的div元素进行排序
【发布时间】：2016-02-04 16:18:52
【问题描述】：

我正在使用来自这个问题sort div elements in a variable 的代码。它工作得很好，但是我需要在页面上对它们进行排序，而不是将 div 元素存储在变量中。

div 元素将包含一个长菜单，因此希望在页面上而不是在变量中对 div 进行排序。

【问题讨论】：

这里是小提琴 - jsfiddle.net/decker2/3bjj70h3/5
将它们附加到 var html 中？
SO 使用 jQuery 选择器读取元素，排序，然后将它们附加回页面...
小提琴不是已经按照你的要求做了吗？元素在排序后写入页面。
嗨@volx757，是的，它们是从var html写入页面的。我需要对页面上已有的 div 进行排序，而不是对变量中的 div 进行排序。

标签： javascript jquery html

【解决方案1】：

因此，对于您的代码，不要使用变量，而是使用 jQuery 选择器。

排序的基本思路

$("li").sort( function (a,b) { 
  return $(a).text() > $(b).text();
}).appendTo("ul");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>C</li>
  <li>A</li>
  <li>B</li>
</ul>

使用 div

$(".wrapper div").sort( function (a,b) { 
  return $(a).text() > $(b).text();
}).appendTo(".wrapper");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div>C</div>
  <div>A</div>
  <div>B</div>
</div>

和带有 id 的 indexOf...

var sortOrder = "Train,Car,Bus";

$(".wrapper div").sort( function (a,b) { 
  return sortOrder.indexOf(a.id) > sortOrder.indexOf(b.id);
}).appendTo(".wrapper");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="Car">C</div>
  <div id="Bus">A</div>
  <div id="Train">B</div>
</div>

【讨论】：

感谢 epascarello。我对 indexOf 使用了类似的想法，但不适用于 IE。这将如何与 div 一起使用？
应该与 div 没有什么不同。追加到父节点
谢谢。我需要通过变量设置排序顺序。
所以像在另一个问题中那样做，而不是使用变量，选择元素....
我应该使用 Order by 而不是 Sort。我想实现这样的目标stackoverflow.com/questions/16283734/…