jquery - Jquery重新排序html元素

Question

我有 5 个 html 元素

<a href="#"><img src="image1.jpg" /></a>
<a href="#"><img src="image2.jpg" /></a>
<a href="#"><img src="image3.jpg" /></a>
<a href="#"><img src="image4.jpg" /></a>
<a href="#"><img src="image5.jpg" /></a>

我想重新订购

<a href="#"><img src="image5.jpg" /></a>
<a href="#"><img src="image1.jpg" /></a>
<a href="#"><img src="image2.jpg" /></a>
<a href="#"><img src="image3.jpg" /></a>
<a href="#"><img src="image4.jpg" /></a>

我如何使用 jquery 来实现这一点（如果可能，不要使用插件）。

谢谢

Answer 1

假设你有这个 HTML：

 <div id=parent>
   <a href="#"><img src="image5.jpg" /></a>
   <a href="#"><img src="image1.jpg" /></a>
   <a href="#"><img src="image2.jpg" /></a>
   <a href="#"><img src="image3.jpg" /></a>
   <a href="#"><img src="image4.jpg" /></a>
  </div>

并且您想按图像的 src 排序，那么您可以这样做：

function compareStrings(a,b) {
  if (a>b) return 1;
  else if (a<b) return -1;
  return 0;
}
$('#parent').append($('a').detach().sort(function(a,b){
  return compareStrings($('img',a).attr('src'), $('img',b).attr('src'));
}));

示范

Answer 2

我建议：

$('img').last().parent().insertBefore($('img').first().parent());

尽管没有关于重新排序的具体标准的信息，但很难提供一个特别有用的解决方案。

以上假设您要根据图像元素重新排序元素（因为这是最明显索引/编号的元素），但是要a改用：

$('a').last().insertBefore($(this).prevAll(':last'));

Answer 3

我发现这段代码运行良好（不是我的）：博客文章：http: //james.padolsey.com/javascript/sorting-elements-with-jquery/
来源 ： http: //github.com/padolsey/jQuery-Plugins /tree/master/sortElements/

示例：（转述自博客）

<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>

包含库，然后运行：

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

结果：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>