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

【问题标题】：The best way to sort divs with a lot of content on the html page?在 html 页面上对具有大量内容的 div 进行排序的最佳方法？
【发布时间】：2025-12-02 17:20:03
【问题描述】：

下面是这个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>

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

【问题讨论】：

最好的方法是使用 javascript。如果您不确定如何自己编写，应该有很多可用的插件，例如：isotope.metafizzy.co
@battaboombattabaam，请删除您的评论。
对于一个有这个问题的人。我需要你解释这个问题有什么问题。请不要在没有解释的情况下加减号。
寻求最好的方法来做某事。很可能会导致基于意见的答案，这是不想要的。尝试自己实现排序，然后询问具体问题。这很可能是您被否决的原因。
@williamzo 我没有否决你的问题，但如果你想要我的话。你什么都没试过，我所做的只是给你指出一个你可以观察的方向。您不能只是简单地要求任何人为您编写整个代码部分而无需付出最少的努力。抱歉，如果这听起来很糟糕。继续努力，保持动力。

标签： javascript jquery sorting javascript-objects

【解决方案1】：

下面的代码根据 span 的 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>

【讨论】：

非常感谢。它工作得很好！在问这个问题之前，我尝试使用数组并对它们进行排序。您的解决方案有效且效果更好。