Javascript 如何显示<；部门>；及<；a>；当使用jquery加载页面时，是否按升序？

我有一些清单。目前页面加载时列表显示为

• Img 1
• 测试1
• Img 3
• 测试3
• img 2
• 测试2

当页面加载时，我需要如下结果

• Img 1
• 测试1
• Img 2
• 测试2
• Img 3
• 测试3

Img

位于

标签中，

test

内容位于

标签中

加载页面时，如何按升序排列

和

在

标记中有

数据id

。在

标记中有

数据标记id

Html

<figure class="image_container">
    <img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="738" height="800">
    <figcaption class="caption">
    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="1"></a>

    <div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;"><p><strong>Test1</p></div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="3"></a>

    <div id="areaDesc-3" class="description invisible" data-id="3"><p>Test3</p></div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="2"></a>

    <div id="areaDesc-2" class="description invisible" data-id="2"><p>Test2</p></div>

   </figcaption>
</figure>

---

您的代码即将运行

只需使用jQuery

.data（）

即可访问数据属性值。注意，若数据属性存储数值，它将返回数字，而不是字符串，所以您不需要自己解析它

您也不需要

.remove（）

元素。您只需要将项目附加到特定的容器中——如果项目已经在DOM树中，那么它将自动从当前位置分离，并将其移动到新位置。只需按正确的顺序添加项，即可获得所需的结果

$（“.container>div”）
.sort（函数（a，b）{return$（a）.data（“id”）-$（b）.data（“id”）；}）
.each（function（）{$（this）.appendTo（“.container”）；}）

1.
3.
2.
9
5.
4.
8.
7.
6.
您的代码即将运行

只需使用jQuery
.data（）
即可访问数据属性值。注意，若数据属性存储数值，它将返回数字，而不是字符串，所以您不需要自己解析它

您也不需要
.remove（）
元素。您只需要将项目附加到特定的容器中——如果项目已经在DOM树中，那么它将自动从当前位置分离，并将其移动到新位置。只需按正确的顺序添加项，即可获得所需的结果


$（“.container>div”）
.sort（函数（a，b）{return$（a）.data（“id”）-$（b）.data（“id”）；}）
.each（function（）{$（this）.appendTo（“.container”）；}）

1.
3.
2.
9
5.
4.
8.
7.
6.
您可以尝试：

var yourList = $(".description");
yourList.sort(function(x, y){
    return $(x).data("id")-$(y).data("id")
});
$(".caption").append(yourList);

已经测试并开始工作，注意到一个小的打字错误。在此处查看它的工作情况
您可以尝试：

var yourList = $(".description");
yourList.sort(function(x, y){
    return $(x).data("id")-$(y).data("id")
});
$(".caption").append(yourList);

已经测试并开始工作，注意到一个小的打字错误。看到它在这里工作了吗？
只是出于好奇，你一开始是如何制作div的？如果它来自一个数据库，你能不能在这一点上排序？好问题。我正在使用contao，它是CMS。我不知道怎么做。我已经试过这个代码，但我有标签在中间。添加此代码标记后，mmm之间没有显示，要对其进行排序需要做更多的工作，您最初只是询问有关div的问题。您是否可以控制初始输出？这些内容和图像是通过后端添加的。在前端，它显示了混乱的结果。只是出于好奇，你是如何建立在第一位的div？如果它来自一个数据库，你能不能在这一点上排序？好问题。我正在使用contao，它是CMS。我不知道怎么做。我已经试过这个代码，但我有标签在中间。添加此代码标记后，mmm之间没有显示，要对其进行排序需要做更多的工作，您最初只是询问有关div的问题。您是否可以控制初始输出？这些内容和图像是通过后端添加的。在前端，它显示了混乱的结果。我已经更新了我的问题。我用了这个代码，但是在div tags之间缺少了标记谢谢你，所以我更新了我的问题。我用了这个代码，但是在div tags之间缺少了标记谢谢