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

Demonstration

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>

Jquery重新排序html元素

3 个答案: