Question

I have some listings. At present when page loads listing is showing like

Img 1
Test 1
Img 3
Test 3
img 2
Test 2

When page loads, I need results like

Img 1
Test 1
Img 2
Test 2
Img 3
Test 3

Img is in <a> tag and test content is in <div> tag

How can order the <div> and <a> in ascending order when page loads?

In <div> tag there is data-id. In <a> tag there is 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>

Script

$('.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属性存储数值，则返回number而不是string，因此您不需要自己解析它。

您也不需要.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>

Answer 2

您可以尝试：

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

现在已经测试过，注意到了一个小错字。看到它在这里工作https://jsfiddle.net/trekmp/pLyw3qg4/5/

如何显示<div>和<a> in ascending order when page loads using jquery?

2 个答案: