jQuery排序问题（求高手）

Question

使用jQuery给div层排序jQuery

Answer 1

<div id="aaaa">
    <div id="div2">div2</div>
    <div id="div1">div1</div>
    <div id="div3">div3</div>
</div>var div= $('#aaaa').find('div');var arr = Array.prototype.slice.call(div);arr.sort(function(v1,v2){
    if(v1.id<v2.id){
        v1.parentNode.insertBefore(v1,v2);
        return -1;
    }else{
        v1.parentNode.insertBefore(v2,v1);
        return 1;
    }
});

Answer 2

我给div层里面添加其他的标签就没用了

Answer 3

附上我的代码<div id="main">
  <div class="box" id="box1"><img src="img/1.gif" width="100" height="60" /><span>11</span></div>  
  <div class="box" id="box2"><img src="img/3.gif" width="100" height="60" /><span>33</span></div>  
  <div class="box" id="box3"><img src="img/4.gif" width="100" height="60" /><span>55</span></div>  
  <div class="box box_no" id="box4"><img src="img/2.gif" width="100" height="60" /><span>22</span></div>
  <input type="button" id="price" value="价格" />
</div>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">  
$(function(){
$("#price").click(function(){
var div=$("#main").find("div");
var arr=Array.prototype.slice.call(div);

arr.sort(function(v1,v2){
if(v1.id<v2.id){
v1.parentNode.insertBefore(v1,v2);
return -1;
}else{
v1.parentNode.insertBefore(v2,v1);
return 1;
}
})
});
});          
</script>  

Answer 4

var div= $('#main').find('div');
var arr = Array.prototype.slice.call(div);
arr.sort(function(v1,v2){
    if(v1.id<v2.id){
        return -1;
    }else{
        return 1;
    }
});
for(var i=0;i<arr.length;i++){
    $('#main')[0].appendChild(arr[i]);
}把里面的INPUT提到外面来吧，样式写写其实一样。不然排序过后input会在最前面。

Answer 5

忘了说了，这个是根据div的ID来排序的。要按别的方式排的话自己改一下。var div= $('#main').find('div');//获取所有div
var arr = Array.prototype.slice.call(div);//将jquery选择器生成的类Array转换成真实的Array，因为要用到Array的排序方法
arr.sort(function(v1,v2){
    if(v1.id<v2.id){//这里是比较2个层的id，来决定顺序，自己调整下
        return -1;
    }else{
        return 1;
    }
});
for(var i=0;i<arr.length;i++){
    $('#main')[0].appendChild(arr[i]);//重新排列div
}

Answer 6

你好像是想根据里面的span来排序的，这里改成这样：if($(v1).find('span')[0].innerHTML<$(v2).find('span')[0].innerHTML){

Answer 7

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#abv").click(function(){
var ar=new Array();
$("#div div").each(function(){
ar.push($(this).attr("id").substr(3));
});
ar.sort();//从小到大
//ar.sort().reverse();//从大到小
for(var i=0;i<ar.length;i++){
$("#div").append($('#div'+ar[i]));
}
});
})
</script>
<input type="button" id="abv" value="测试用按钮"/>
<div id="div">
<div id="div2">
我是DIV2
</div>
<div id="div4">
我是DIV4
</div>
<div id="div1">
我是DIV1
</div>
<div id="div3">
我是DIV3
</div>
</div>

Answer 8

<div class="content_major">
    <div class="content_title">
      <ul>
        <li><a id="price">价格</a></li>
        <li><a>难度</a></li>
        <li><a id="verify">审核时间</a></li>
      </ul>
      <div class="clr"></div>
    </div>
    <div class="box">
      <div class="box_left">
        <p class="box_img"><a href="#"><img src="img/1.gif" width="177" height="106" /></a></p>
      </div>
      <ul class="box_center">
        <li class="box_name"><a href="#">烈火战神-决战沙城</a><img src="img/new.gif" /></li>
        <li class="box_hour"><span>[审核时间1小时]&nbsp;难度</span>:<img src="img/star.gif" /></li>
        <li class="box_more" title="《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一体,呈现一次奇妙的仙侠之旅!">《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一---<a href="#" >任务详情>>></a></li>
      </ul>
      <p class="box_num">23249人已参与</p>
      <div class="clr"></div>
      <div class="box_right_1">
        <p class="box_rmb">+<span>75</span>C币</p>
        <p class="join_btn_1"><a href="#" >&nbsp;</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="box">
      <div class="box_left">
        <p class="box_img"><a href="#" ><img src="img/content_1.gif" width="177" height="106" /></a></p>
      </div>
      <ul class="box_center">
        <li class="box_name"><a href="#" >烈火战神-决战沙城</a><img src="img/new.gif" /></li>
        <li class="box_hour"><span>[审核时间5分钟]&nbsp;难度</span>:<img src="img/star.gif" /></li>
        <li class="box_more" title="《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一体,呈现一次奇妙的仙侠之旅!">《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一---<a href="#" >任务详情>>></a></li>
      </ul>
      <p class="box_num">23249人已参与</p>
      <div class="clr"></div>
      <div class="box_right_1">
        <p class="box_rmb">+<span>200</span>C币</p>
        <p class="join_btn_1"><a href="#" >&nbsp;</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="box">
      <div class="box_left">
        <p class="box_img"><a href="#" ><img src="img/content_2.gif" width="177" height="106" /></a></p>
      </div>
      <ul class="box_center">
        <li class="box_name"><a href="#" >烈火战神-决战沙城</a><img src="img/new.gif" /></li>
        <li class="box_hour"><span>[审核时间10分钟]&nbsp;难度</span>:<img src="img/star.gif" /></li>
        <li class="box_more" title="《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一体,呈现一次奇妙的仙侠之旅!">《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一---<a href="#" >任务详情>>></a></li>
      </ul>
      <p class="box_num">23249人已参与</p>
      <div class="clr"></div>
      <div class="box_right_1">
        <p class="box_rmb">+<span>100</span>C币</p>
        <p class="join_btn_1"><a href="#" >&nbsp;</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="box">
      <div class="box_left">
        <p class="box_img"><a href="#" ><img src="img/content_3.gif" width="177" height="106" /></a></p>
      </div>
      <ul class="box_center">
        <li class="box_name"><a href="#" >烈火战神-决战沙城</a><img src="img/new.gif" /></li>
        <li class="box_hour"><span>[审核时间2小时]&nbsp;难度</span>:<img src="img/star.gif" /></li>
        <li class="box_more" title="《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一体,呈现一次奇妙的仙侠之旅!">《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一---<a href="#" >任务详情>>></a></li>
      </ul>
      <p class="box_num">23249人已参与</p>
      <div class="clr"></div>
      <div class="box_right_1">
        <p class="box_rmb">+<span>90</span>C币</p>
        <p class="join_btn_1"><a href="#" >&nbsp;</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="box">
      <div class="box_left">
        <p class="box_img"><a href="#" ><img src="img/content_4.gif" width="177" height="106" /></a></p>
      </div>
      <ul class="box_center">
        <li class="box_name"><a href="#" >烈火战神-决战沙城</a><img src="img/new.gif" /></li>
        <li class="box_hour"><span>[审核时间2小时]&nbsp;难度</span>:<img src="img/star.gif" /></li>
        <li class="box_more" title="《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一体,呈现一次奇妙的仙侠之旅!">《烈火战神》是2013年最炙手可热的创新MMORPG仙侠类网页游戏!首创特色武学系统,融侠情、武功、文艺和趣味于一---<a href="#" >任务详情>>></a></li>
      </ul>
      <p class="box_num">23249人已参与</p>
      <div class="clr"></div>
      <div class="box_right_1">
        <p class="box_rmb">+<span>150</span>C币</p>
        <p class="join_btn_1"><a href="#" >&nbsp;</a></p>
      </div>
      <div class="clr"></div>
    </div>
</div>$(function(){
$("#price").click(function(){
var div= $('.content_major').find('.box');
var arr = Array.prototype.slice.call(div);
arr.sort(function(v1,v2){
if($(v1).find('.box_rmb')[0].innerHTML>$(v2).find('.box_rmb')[0].innerHTML){
return -1;
}else{
return 1;
}
});
for(var i=0;i<arr.length;i++){
$('.content_major')[0].appendChild(arr[i]);
}
$(this).addClass("blue");
});
});          我把jq应用到自己的页面中后发现，它不是按顺序排的，变成两个两个的进行比较排序了。

Answer 9

你要比哪个就把哪个拿出来比呗，不要随便就拿字符串来比大小，记得取到实际的数字，再转成数字来比。
        var div= $('.content_major').find('.box');
        var arr = Array.prototype.slice.call(div);
        arr.sort(function(v1,v2){
            var v1RMB = parseInt($(v1).find('.box_rmb span')[0].innerHTML)
            var v2RMB = parseInt($(v2).find('.box_rmb span')[0].innerHTML)
            if(v1RMB>v2RMB){
                return 1;
            }else{
                return -1;
            }
        });
        for(var i=0;i<arr.length;i++){
            $('.content_major')[0].appendChild(arr[i]);
        }
        $(this).addClass("blue");