jQuery-基于数据属性的排序

在该

排序

功能中，我希望在单击相应的

[数据头]

值时，能够基于嵌套的

[数据排序]

值重新排列每个

.项

当前代码的问题在于，它创建了一个新列表并对结果进行排序，而不是仅仅重新排列每个
.item
，以匹配排序标准

如何设置排序功能，根据与
数据头
值匹配的
数据排序
值重新排列每个
项目


$（“.table”）。在（“单击“，”.btn“，函数（）上）{
设table=$（this）.closest（“.table”）.eq（0）；
让行=表
.find（“[数据排序]”）
.toArray（）
.sort（比较器（$（this）.index（））；
this.asc=！this.asc；
如果（！this.asc）{
rows=rows.reverse（）；
}
对于（变量i=0；i

.list{
显示器：flex；
弯曲方向：立柱；
}
.项目，
.标题{
显示器：flex；
}
.btn{
光标：指针；
}
[数据排序]{
边框：1px实心；
填充：10px；
}

国家
价格
法国
内容
内容
$25
西班牙
内容
内容
$25
黎巴嫩
内容
内容
$17
我已经为排序重写了您的代码：


var-keys=[…$（“.table.btn”）].map（（i）=>$（i.text（））；
var arr=[…$（“.list.item”）].map（（i）=>{
var data=$（i）.find（“[data sort]”）；
var obj={}；
for（设id=0；id{
如果（a[keytosort].startsWith（“$”）{
设an=a[keytosort].子字符串（1）；//推迟$
设bn=b[keytosort].子串（1）；
返回编号（an）-编号（bn）；
}否则{
返回a[keytosort].localeCompare（b[keytosort]）；
}
})；//结束排序
如果（描述）arr=arr.reverse（）；
//重新创建不同的项目
$（“.list”）.children（）.remove（）；
for（设i=0；i
.list{
显示器：flex；
弯曲方向：立柱；
}
.项目，
.标题{
显示器：flex；
}
.btn{
光标：指针；
}
[数据排序]{
边框：1px实心；
填充：10px；
}

国家
价格
法国
内容1
内容2
$25
西班牙
内容1
内容2
$30
黎巴嫩
内容
Contentszz
$17
您想排序一个保持相同视图，而不是创建一个新的html视图吗？是的，只需重新排列项目，不更改html标记。您如何处理内容？它们不会出现在sort and result finalIt中，只是为了表明数据排序内容不相关，可以嵌套在每个
中的任何位置。item
谢谢@Frenchy。有没有办法通过再次单击来切换排序？目前它只排序一种方式如果你排序国家然后价格然后国家…我看不出问题…我想能够排序价格从最高到最低，并从A-Z或Z-A命名。任何我必须排序的数据我都需要使用itok进行任何一种方式，我明白，所以当你重新单击同一个键时，排序是下降的，以此类推，实际上
.item
应该重新安排，而不仅仅是项中的内容。每个项目都是一个单独的条目，我想根据排序选择重新排列它们。