jquery中按照商品价格给li标签排序的方法

/**实现：点击价格进行排序，布尔变量作为开关，true升序，false降序   ------未实现！
*1.获取数字到数组！
*2.对数组排序
*3.遍历数组，使价格等于数组中数字的Li按照数组中的顺序进行移除并且追加到li标签中！
*/
$(function ()
{
$("#sortPrice span:eq(0)").click(
function ()
{
console.log("hello");
var arr = new Array();
$(".cate_list span").each(function (index, e)
{
arr[index] = parseInt($(e).text().substring(1));
});
//  排序开始
for (i = 1; i < arr.length; i++) {
for (j = 0; j < arr.length - i; j++) {
var temp = 0;
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
// 排序结束
//               alert(arr);
var len = $(".cate_list span").size();
alert(len);
//取到li下的数字值
//把Li按照数组的顺序进行插入！
for(i=0;i<arr.length;i++)
{
for(j=0;j<len;j++)
{
if(arr[i]==$(".cate_list span").eq(j).text().substring(1))
{
//                       alert($("li span").eq(j).text().substring(1));
console.log(i+""+j);
$(".cate_list span").eq(j).parents("li").remove().appendTo(".cate_list");
break;
}
}
}
}
);
});

/***相关HTML代码***/
 

<ul class="cate_list">
<li>
<div class="img"><a href="#"><img src="images/per_1.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥198.00</span>
</div>
<div class="name"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_2.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥598.00</span>
</div>
<div class="name"><a href="#">佰色传情淡水珍珠项链圆8-9mm</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_3.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥440.00</span>
</div>
<div class="name"><a href="#">京润 【魅惑】海水珍珠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_4.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥680.00</span>
</div>
<div class="name"><a href="#">心鑫圆 天然珍珠项链淡水套装</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_5.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥1980.00</span>
</div>
<div class="name"><a href="#">海瞳 明星款 玛瑙天然淡水珍珠</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_6.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥198.00</span>
</div>
<div class="name"><a href="#">佰色传情 淡水珍珠项链 </a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_7.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥390.00</span>
</div>
<div class="name"><a href="#">7-8mm米形珍珠 加长型 </a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_8.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥2980.00</span>
</div>
<div class="name"><a href="#">珠韵首饰 多色可选(白色)</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_9.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥670.00</span>
</div>
<div class="name"><a href="#">小清新8.5-10.5mm珍珠吊坠项链正圆饰品</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_10.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥2198.00</span>
</div>
<div class="name"><a href="#">京润 【简爱】 淡水珍珠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_11.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥5198.00</span>
</div>
<div class="name"><a href="#">
海瞳 罕见7-8mm高亮泽 表皮光滑 </a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_12.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥212.00</span>
</div>
<div class="name"><a href="#"> 媲美海水珠 天然浅粉金色珍珠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_5.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥618.00</span>
</div>
<div class="name"><a href="#">无暇品质(925银玫瑰花型银扣)</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_6.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥260.00</span>
</div>
<div class="name"><a href="#">珍珠吊坠925银镀金 淡水珍珠项链锁骨链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_7.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥198.00</span>
</div>
<div class="name"><a href="#">海瞳 淡水珍珠项链锁骨链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_8.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥698.00</span>
</div>
<div class="name"><a href="#">海瞳 淡水珍珠吊坠</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_9.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥198.00</span>
</div>
<div class="name"><a href="#"> 超强光珍珠吊坠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_10.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥865.00</span>
</div>
<div class="name"><a href="#"> 节节高升花生款(玫瑰色款)</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_11.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥198.00</span>
</div>
<div class="name"><a href="#">佰色传情 编织款珍珠项链</a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="images/per_12.jpg" width="210" height="185"/></a></div>
<div class="price">
<span>￥2198.00</span>
</div>
<div class="name"><a href="#">珠圆玉润 送爱人 </a></div>
<div class="carbg">
<a href="#" class="ss">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
</ul>