javascript - 使用jquery加载页面时如何按升序显示和？

Question

我有一些列表。目前，当页面加载列表时，显示如下

• 图片 1
• 测试 1
• 图 3
• 测试 3
• 图片2
• 测试 2

页面加载时，我需要类似的结果

• 图片 1
• 测试 1
• 图 2
• 测试 2
• 图 3
• 测试 3

Img位于<a>标签和test内容在 <div>标签

如何订购<div>和<a>页面加载时按升序排列？

在 <div>标签有data-id 。在 <a>标签有data-tag-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>

脚本

$('.description').sort(function (a, b) {
        return parseInt(a.data-id) > parseInt(b.data-id);
    }).each(function(){
        var elem = $(this);
        elem.remove();
        $(elem).appendTo(".description");
    });

Answer 1

您的代码即将运行。

您只需要使用 jQuery .data()访问数据属性值。请注意，如果 data 属性存储数值，则它返回数字，而不是字符串，因此您不需要自己解析它。

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

$(".container > div")
  .sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
  .each(function() { $(this).appendTo(".container"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div data-id="1">1</div>
  <div data-id="3">3</div>
  <div data-id="2">2</div>
  <div data-id="9">9</div>
  <div data-id="5">5</div>
  <div data-id="4">4</div>
  <div data-id="8">8</div>
  <div data-id="7">7</div>
  <div data-id="6">6</div>
</div>

更新:以便将您的 div 与相关的 <a/> 一起排序。标签，您可以使用 jQuery .prev()它只需要前面的 DOM 元素，然后您可以使用此链接执行相同的操作。然而，最好将 a 包装起来。和div到单个元素中，以便在 HTML 中描述它们的关系，而不是按它们的顺序。

$(".container > div")
  .sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
  .each(function() { 
    $(this).prev().appendTo(".container");
    $(this).appendTo(".container"); 
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container"> 
  <a href="#">One</a>
  <div data-id="1">1</div>
  
  <a href="#">Three</a>
  <div data-id="3">3</div>
  
  <a href="#">Two</a>
  <div data-id="2">2</div>
  
  <a href="#">Nine</a>
  <div data-id="9">9</div>
  
  <a href="#">Five</a>
  <div data-id="5">5</div>
  
  <a href="#">Four</a>
  <div data-id="4">4</div>
  
  <a href="#">Eight</a>
  <div data-id="8">8</div>
  
  <a href="#">Seven</a>
  <div data-id="7">7</div>
  
  <a href="#">Six</a>
  <div data-id="6">6</div>  
</div>