jQuery parent div sort

Question

我有简单的HTML数据：

<div class="divTable svc-adv" id="info">
    <div class="divTableBody adv-body">
        <div class="divTableRow adv-row">
            <div class="divTableCell adv-cell snmhdr">Title</div>
            <div class="divTableCell adv-cell stitlehdr">Service Name</div>
            <div class="divTableCell adv-cell snhdr">Service Number</div>
        </div>
    </div>
</div>
<div class="divTable svc-adv servicealert">
    <div class="divTableBody adv-body">
        <div class="divTableRow adv-row">
            <div class="divTableCell adv-cell advtitle">WAS</div>
            <div class="divTableCell adv-cell advsnm">ABC</div>
            <div class="divTableCell adv-cell advsnum">123</div>
        </div>
    </div>
</div>
<div class="divTable svc-adv servicealert">
    <div class="divTableBody adv-body">
        <div class="divTableRow adv-row">
            <div class="divTableCell adv-cell advtitle">NYP</div>
            <div class="divTableCell adv-cell advsnm">XYZ</div>
            <div class="divTableCell adv-cell advsnum">321</div>
        </div>
    </div>
</div>

当用户单击snmhdr类时，它应该对类数据进行排序advtitle并按排序顺序显示adv-row。

如何使用jQuery实现这一点？

Answer 1

我对你的HTML结构做了一些更改。添加了需要在容器 iddiv 中排序的div，并将类排序块添加到需要排序的div 中。

    <div class="divTable svc-adv" id="info">
        <div class="divTableBody adv-body">
            <div class="divTableRow adv-row">
                <div class="divTableCell adv-cell snmhdr">Title</div>
                <div class="divTableCell adv-cell stitlehdr">Service Name</div>
                <div class="divTableCell adv-cell snhdr">Service Number</div>
            </div>
        </div>
    </div> 
    <div id="container">
        <div class="divTable Sort-block svc-adv servicealert">
            <div class="divTableBody adv-body">
                <div class="divTableRow adv-row">
                    <div class="divTableCell adv-cell advtitle">WAS</div>
                    <div class="divTableCell adv-cell advsnm">ABC</div>
                    <div class="divTableCell adv-cell advsnum">123</div>
                </div>
            </div>
        </div>
        <div class="divTable Sort-block svc-adv servicealert">
            <div class="divTableBody adv-body">
                <div class="divTableRow adv-row">
                    <div class="divTableCell adv-cell advtitle">NYP</div>
                    <div class="divTableCell adv-cell advsnm">XYZ</div>
                    <div class="divTableCell adv-cell advsnum">321</div>
                </div>
            </div>
        </div>
    </div>

Jquery Code：

var $divs = $("div.Sort-block");
$('.snmhdr').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".advtitle").text() > $(b).find(".advtitle").text();
    });
    $("#container").html(alphabeticallyOrderedDivs);
});