jQueryが私のDjangoで要素を並べ替えていないページ

Question

2つの並べ替えオプションをWebページに追加しようとしています。現在、それぞれのリンク（.alphaと.finish）をクリックすると、画面上にアニメーションが表示され、名前が動いていることがわかりますが、出力は同じままです。以下は私がgoogle検索で見つけたJSFiddleのjQueryスクリプトです。

var $divs = $('div.col-xs-3'); 
$('.alpha').on('click', function() { 
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
     return $(a).attr('data-name') > $(b).attr('data-name'); 
    }); 
    $('.people').html(alphabeticallyOrderedDivs); 
}); 

$('.finish').on('click', function() { 
    var numericallyOrderedDivs = $divs.sort(function (a, b) { 
     return $(a).attr('id') < $(b).attr('id'); 
    }); 
    $('.people').html(numericallyOrderedDivs); 
}); 

私は、ページを表示するためにはDjangoを使用して、現在は正常にそれぞれがアルファベット順にDIV注文するORDER_BYを持っています。これはそれに影響しますか？

Answer 1

3つのこと：

1. jQueryの正式sort機能を持っていないので、それに依存しないでください。

2. ソート機能は（非公式に）Array.prototypeから取得しています。私たちはそれを直接使用します。ソート関数のコールバックの仕組みは、の数値を返します。ブール値ではありません。最初の引数が2番目のものよりも前に表示される場合は負の数値、ソートの目的で等しい場合は0、秒は最初の前に現れるはずです。

3. 公式には、htmlはjQueryオブジェクトまたは配列（文字列だけと機能）のいずれかを受け入れ、これの代わりにempty().append(...)を使用できません：

だから私たちは、あなたの質問にコードを最初に修正しますjQueryのセットから真の配列を取得するためにgetを使用して、我々は正しく名前を比較するlocaleCompareを使用します。

var $divs = $('div.col-xs-3'); 
 
$('.alpha').on('click', function() { 
 
    var alphabeticallyOrderedDivs = $divs.get().sort(function (a, b) { 
 
    // Note -----------------------------^^^^^^ 
 
     return $(a).attr('data-name').localeCompare($(b).attr('data-name')); 
 
    // Note -------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
 
    }); 
 
    $('.people').empty().append(alphabeticallyOrderedDivs); 
 
    // Note -----^^^^^^^^^^^^^^ 
 
});

<input type="button" class="alpha" value="Alpha"> 
 
    <div class="people"> 
 
    <div class="col-xs-3" data-name="q">q</div> 
 
    <div class="col-xs-3" data-name="p">p</div> 
 
    <div class="col-xs-3" data-name="j">j</div> 
 
    <div class="col-xs-3" data-name="e">e</div> 
 
    <div class="col-xs-3" data-name="t">t</div> 
 
    <div class="col-xs-3" data-name="d">e</div> 
 
    <div class="col-xs-3" data-name="a">a</div> 
 
    <div class="col-xs-3" data-name="q">q</div> 
 
    <div class="col-xs-3" data-name="r">r</div> 
 
    <div class="col-xs-3" data-name="x">x</div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>