用jquery按字母顺序对手风琴进行排序

Question

您好，我有一架手风琴，我想按字母顺序对它们进行排序。

我想要的是在所有手风琴顶部的 4 个按钮按字母顺序对它们进行排序：

姓名、姓氏、街道、城市

这是我的 HTML 代码。

<div class="all">
        <div class="accordion-head">
            <div style="width: 25%;">Name</div>
            <div style="width: 25%;">Latname</div>
            <div style="width: 25%;">Street</div>
            <div style="width: 25%;">City</div>
        </div>  

   <div class="detail inside_accoridon">
        <div class="col_6">Google Maps</div>
        <div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
</div>


<div class="all">
        <div class="accordion-head">
            <div style="width: 25%;">Name</div>
            <div style="width: 25%;">Latname</div>
            <div style="width: 25%;">Street</div>
            <div style="width: 25%;">City</div>
        </div>  

   <div class="detail inside_accoridon">
        <div class="col_6">Google Maps</div>
        <div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
</div>

希望有人知道我该如何处理。

最好的问候。

Answer 1

将 id 属性添加到 div.all 并将类添加到 td-tags，例如：

<div id="acc-1" class="all">
    ...  
    <td class="acc-name" width="25%">Name</td>
    <td class="acc-lastname" width="25%">Lastname</td>
    <td class="acc-street" width="25%">Street</td>
    <td class="acc-city" width="25%">City</td>
    ...
</div>

然后生成 4 个关联数组，其中 Name、Lastname、Street 和 City 作为键，accordion-item-ids 作为值，例如：

var names = {};
$('div.all').each(function() {
    names[$(this).find('td.name').text()] = $(this).attr('id');
});

现在您可以使用 array.sort() 对数组进行排序；并更改手风琴的顺序。