时间戳

首页 > 解决方案 > 在 html 页面上对具有大量内容的 div 进行排序的最佳方法？

javascript - 在 html 页面上对具有大量内容的 div 进行排序的最佳方法？

问题描述

下面是这个html代码结构。出于排序的目的，您可以将任何“id=”、类或数据属性添加到任何标签。每个块（其中的任何标签）都可以用其唯一的字符串标识符来补充，例如<div class="c1" id="uniqueid">. 最初，页面是按未排序的顺序生成的。当您单击页面上的按钮时，这些 div 块<div class="c1">应按值<span id="sort">...</span>按升序、降序和与排序前完全相同的未排序顺序进行排序。它们必须被排序，当然它们在页面上的位置应该改变。块的数量<div class="c1">可以多达 1000 个。

<div class="global">

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">100</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">50</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">150</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

</div>

在这里进行排序的最佳方法是什么？我会很感激一个例子。

标签： javascriptjquerysortingjavascript-objects

解决方案

下面的代码根据跨度的 int 值进行比较。您可以根据需要更改比较器功能。

const $c1_list = $('.c1').detach();
$c1_list.sort(function(el1, el2){
	return parseInt($(el1).find('#sort').text()) > parseInt($(el2).find('#sort').text()) ? 1 : -1;
});
$('.global').append($c1_list);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global">

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">100</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">50</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

    <div class="c1">
        <div class="c2">
            <img src="https://www.example.com/i1.jpg">
            <a href="/a1">a1</a>
        </div>
        <div class="c3">
            <span>Text</span>
            <a href="/a2">a2</a>
            <a href="/a3">a3</a>
            <div>
                <div class="c4">Text <span id="sort">150</span> <img src="https://www.example.com/i2.jpg"></div>
                <div class="c5">Text</div>
            </div>
            <div>
                <div class="c6">Text <a href="/a4"><img src="https://www.example.com/i3.jpg"></a></div>
                <div class="c7">500</div>
            </div>
        </div>
    </div>

</div>

推荐阅读