使用jQuery排序div [英] sorting divs using jQuery

问题描述

我试图排序divs 使用 jQuery ，它排序，但似乎排序不正确。

这是在应用 sort / p>

这是 HTML 代码段。

 < div class =container column> 
< div class =row> 
< section class =col-md-10 col-md-offset-3> 
< section class =col-md-2 col-md-offset-1>< a href =./ stafferLink / index.php> Staffer Link< / a&部分> 
< section class =col-md-2 col-md-offset-1>< a href =./ stafferLink / view.php>查看数据< / a&部分> 
< / section> 
< / div> 
< / div> 
  

和 jQuery

  var $ divs = $（。container.column）; 
 
 $（document）.ready（function（）{
 var alphabeticallyOrderedDivs = $ divs.sort（function（a，b）{
 return $（a）.find a：first）。text（）> $（b）.find（a：first）。text（）; 
}）; 
 $（＃container）。html （alphabeticallyOrderedDivs）; 
}）; 
  

PS： #container c $ c> div ，其中包含所有必须按顺序排列的所有 divs 。

这里

对不起，不是 responsive

解决方案

并使用 localCompare 函数。

localeCompare a
引用字符串在排序顺序之前或之后或与给定的
字符串相同。

代码：

  var alphabeticallyOrderedDivs = $ divs.sort（function（a，b）{
 return $（a） .find（a：first）。text（）。toLowerCase（）。localeCompare（$（b）.find（a：first）。text（）toLowerCase（））; 
} 
  

演示： http://jsfiddle.net/bk66on10/

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

I'm trying to sort divs using jQuery, it does sort, but does not seems sorting properly.

This is after applying sort

here is HTML snippet.

<div class="container column">
    <div class="row">
        <section class="col-md-10 col-md-offset-3">
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/index.php" >Staffer Link</a></section>
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/view.php">View Data</a></section>
        </section>
    </div>
</div>

and jQuery

var $divs = $(".container.column");

$(document).ready(function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("a:first").text() > $(b).find("a:first").text();
    });
    $("#container").html(alphabeticallyOrderedDivs);
});

PS: #container is outermost div that contains all divs that need to be in order.

Here it's

sorry, not responsive

解决方案

It's a casing issue try to sort your element ad ignore the case and using localCompare function.

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Code:

var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());           
});

Demo: http://jsfiddle.net/bk66on10/

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

这篇关于使用jQuery排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！