Question

以下是HTML代码。我想按类或src对所有内容进行排序。我一直在寻找答案很长一段时间，似乎我找不到我需要的答案。 HALP？

<table border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td>
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
</td>
</tr>
</tbody>
</table>

我如何对这些图像进行排序，使它看起来像这样......

<img src="/images/gold.gif" class="a1">
<img src="/images/gold.gif" class="a1">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/silver.gif" class="a2">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/copper.gif" class="a3">
<img src="/images/copper.gif" class="a3">

Answer 1

这个3-liner将会这样做：

$("img").sort(function(a,b) {
   return (a.className>b.className)-(b.className>a.className);
}).appendTo("td");

（demo at jsfiddle.net）

排序元素如何运作：

将他们收藏在一个收藏中。 $("img")会在您的示例中选择它们
.sort他们，就你的className property而言。请参阅Sort array of objects by string property value in JavaScript和其他按X排序的问题作为参考。
以新的顺序将它们重新附加到文档中 - 在您的情况下是父td。他们将自动从旧位置移除。

您可能需要调整选择器并使用更具体的内容。

jQuery（Greasemonkey）：按名称/类对图像进行排序

1 个答案: