The best way to sort divs with a lot of content on the html page?

Question

Below is this html code structure. For the purpose of sorting, you may add any "id=", classes or data attributes to any tags. Each block (any tag in it) can be supplemented with its unique string identifier such as <div class="c1" id="uniqueid">. Initially, the page is generated in unsorted order. When you click on the button on the page, these div blocks <div class="c1"> should be sorted by the value in <span id="sort">...</span> in ascending, descending and exactly the same unsorted order as they were before sorting. They must be sorted and of course their position on the page should change. The number of <div class="c1"> blocks can be as many as 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>

What is the best way to do the sorting here? I would appreciate an example.

Answer 1

Below code comparing according to int values of spans. You can change comparator function according to your needs.

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>