jQuery根据所选参数在ul内部排序li

我在ul中有多个li，需要根据选择输入中选择的参数进行排序。我用来实现这一点的jQuery基本上是：

$("#SortBy").on('change', function() {

        var span = $(".divResult > ul.list > li > ul > li span:nth-child(2)")
        var spantoSort = $(".divResult > ul.list > li.Brand > ul > li." + $(this).find("option:selected").text() + " > span:nth-child(2)")

        spantoSort.sort(function(a, b) {
        return $(a).text().localeCompare($(b).text())
        }).each(function(new_Index) {
            var original_Index = $(this).index();

            span.each(function() {
            var Parentli = $(this).parents('.Brand');
            if (original_Index !== new_Index)
            Parentli.eq(original_Index).insertAfter(Parentli.eq(new_Index));
            });    
        });
    });
});

但出于某种原因，这并不是对“li”进行排序，而类似的代码用于对表的列进行排序

以下是整个工作代码：

jQuery（文档）.ready（函数（$）{
$（“#SortBy”）.on（'change'，function（）{
var span=$（“.divResult>ul.list>li>ul>li span:n个子项（2）”）
var spantoSort=$（“.divResult>ul.list>li.Brand>ul>li.”+$（此）.find（“选项：已选”）.text（）+“>span:n子项（2）”
控制台日志（span，spantoSort）；
spantoSort.sort（函数（a，b）{
返回$（a）.text（）.localeCompare（$（b）.text（））
}).每个功能（新索引）{
var original_Index=$（this.Index（）；
console.log（原始索引）；
span.每个（函数（）{
var Parentli=$（this.parents（'.Brand'）；
console.log（Parentli）；
if（原始索引！==新索引）
Parentli.eq（原始索引）.insertAfter（Parentli.eq（新索引））；
});
});
});
});

ul.list{
边框底部：2倍实心#eee；
字体大小：14px；
利润率：0.20px0；
字体大小调整：继承；
字体系列：“投石机MS”，Arial，Verdana，无衬线；
}
ul.list.nrh{
边框底部：2倍实心#ddd；
}
ul.list.nrh>li{
边框顶部：2个实心#ddd；
}
ul.list，
ul.list>li>ul{
填充：0！重要；
列表样式：无！重要；
}
ul.list>li>ul{
边距：0！重要；
}
ul.列表>li.标题{
背景色：rgb（58146,7）；
显示：块；
颜色：#fff；
填充：10px；
字号：800；
}
ul.list>li>ul>li{
字号：200；
边框底部：1px实心#eee；
填充：10px；
}
ul.list>li>ul>li:悬停{
背景色：#EFEF
}
ul.list>li>ul>li:最后一个孩子{
边框底部：无；
}
ul.list ul>li.行标题{
字体大小：14px；
最大宽度：40%；
浮动：左；
保证金权利：3%；
}
ul.list ul>li.row\u数据{
浮动：对；
字号：800；
宽度：57%；
}
ul.list>li>ul>li{
*缩放：1；
}
ul.list>li>ul>li:之前，
ul.list>li>ul>li:after{
内容：“；
显示：表格；
}
ul.list>li>ul>li:after{
明确：两者皆有；
}

排序方式：
排名
评级





三星


排名
3.


评级
2.5




惯性矩


排名
2.


评级
3.5




苹果


排名
1.


评级
4.5

---

还包括JSFIDLE供您参考：

您可能不需要使用

new_index

重新排列每个

div

，而只需将排序后的

li

直接插入

ul

$（“#SortBy”）.on（'change'，function（）{
变量span=$（“.divResult>ul.list>li”）
var option=$（this.val（）；
排序（函数（a，b）{
a=$（a）.find（'li.'+option+'span:n第n个子项（2）'）.text（）
b=$（b）.find（'li.'+option+'span:n子级（2）'）.text（）
返回a.localeCompare（b）
})
$（'#list'）.html（span）；
});
ul.list{
边框底部：2倍实心#eee；
字体大小：14px；
利润率：0.20px0；
字体大小调整：继承；
字体系列：“投石机MS”，Arial，Verdana，无衬线；
}
/*没有行标题的表*/
ul.list.nrh{
边框底部：2倍实心#ddd；
}
/*没有行标题和列的表*/
ul.list.nrh>li{
边框顶部：2个实心#ddd；
}
/*表默认值*/
ul.list，
ul.list>li>ul{
填充：0！重要；
列表样式：无！重要；
}
/*内部列表*/
ul.list>li>ul{
边距：0！重要；
}
/*表格标题*/
ul.列表>li.标题{
背景色：rgb（58146,7）；
显示：块；
颜色：#fff；
填充：10px；
字号：800；
}
/*表行*/
ul.list>li>ul>li{
字号：200；
边框底部：1px实心#eee；
填充：10px；
}
/*表行悬停*/
ul.list>li>ul>li:悬停{
背景色：#EFEF
}
/*表最后一个子行*/
ul.list>li>ul>li:最后一个孩子{
边框底部：无；
}
/*表行标题*/
ul.list ul>li.行标题{
字体大小：14px；
最大宽度：40%；
浮动：左；
保证金权利：3%；
}
/*表行数据*/
ul.list ul>li.row\u数据{
浮动：对；
字号：800；
宽度：57%；
}
/*Clearfix*/
ul.list>li>ul>li{
*缩放：1；
}
ul.list>li>ul>li:之前，
ul.list>li>ul>li:after{
内容：“；
显示：表格；
}
ul.list>li>ul>li:after{
明确：两者皆有；
}

排序方式：
排名
评级





三星


排名
3.


评级
2.5




惯性矩


排名
2.


评级
3.5




苹果


排名
1.


评级
4.5