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'));
}));

示范