ループの前の配列の並べ替え配列の並べ替えを維持しない

Question

html要素とループを持つ配列を作成してソート配列を解析するコードを作成しました。

$('document').ready(function(){ 
 
\t var arrElementStyle = []; 
 
\t $('.bands-alphabetique [id*="band-style-"]').each(function(index){ 
 
\t \t var style = $(this).attr('id').split('-')[2]; 
 
\t \t arrElementStyle[style + '-' + index ] = $(this).find('.element'); 
 
\t }); 
 
\t arrElementStyle.sort(); 
 
\t $('.bands-alphabetique').hide(); 
 
\t for(style in arrElementStyle){ 
 
\t $('.large-centered.col-md-12.clearfix').append(arrElementStyle[style]); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="large-centered col-md-12 clearfix"> 
 
    <div class="bands-alphabetique"> 
 
\t <div class="col-md-3" id="band-style-rock"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Rock</h1> 
 
\t \t \t <a href="band.link">Fiction In Motion</a> 
 
\t \t </div> \t 
 
\t </div> \t 
 
\t <div class="col-md-3" id="band-style-pop"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Pop</h1> 
 
\t \t \t \t <a href="band.link">Marianas Trench</a> 
 
\t \t </div> \t 
 
\t </div> 
 
    <div class="col-md-3" id="band-style-pop"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Alternatif</h1> 
 
\t \t \t \t <a href="band.link">Anberlin</a> 
 
\t \t </div> \t 
 
\t </div> 
 
    </div> 
 
</div>

私は結果が並べ替えされていないHTMLを解析？（私は音楽のスタイルによってソートしたい）のはなぜ？私はしたいですか？

Answer 1

あなたのコードではarrElementStyleを配列として宣言しましたが、後でデータを挿入するための連想配列として使用しました。したがって、これのオブジェクトとしてarrElementStyleを宣言する方が良いです。ここで

は、私はあなたがオブジェクトのキーをソートするためのsort()の助けを借りて達成したいと思うものの例のデモです：

$('document').ready(function() { 
 
    var arrElementStyle = {}; // declare arrEleemntStyle as object 
 
    
 
    $('.bands-alphabetique [id*="band-style-"]').each(function(index) { 
 
     var style = $(this).attr('id').split('-')[2]; 
 
     
 
     // push into object of key <style>-<index> the elements 
 
     arrElementStyle[style + '-' + index] = $(this).find('.element'); 
 
    }); 
 

 
    // get the keys of arrElementStyle for sorting 
 
    var keys = Object.keys(arrElementStyle), 
 
     i, len = keys.length; 
 
    console.log('before = ', keys); 
 
    keys.sort(); // sort the object keys 
 
    console.log('after = ', keys); 
 
    
 
    $('.bands-alphabetique').hide(); 
 
    
 
    // iterate the sorted keys and append it 
 
    for (i = 0; i < len; i++) { 
 
     var k = keys[i]; 
 
     $('.large-centered.col-md-12.clearfix').append(arrElementStyle[k]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="large-centered col-md-12 clearfix"> 
 
    <div class="bands-alphabetique"> 
 
     <div class="col-md-3" id="band-style-rock"> 
 
      <div class="element"> 
 
       <h1 class="band-style-title">Rock</h1> 
 
       <a href="band.link">Fiction In Motion</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3" id="band-style-pop"> 
 
      <div class="element"> 
 
       <h1 class="band-style-title">Pop</h1> 
 
       <a href="band.link">Marianas Trench</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3" id="band-style-pop"> 
 
      <div class="element"> 
 
       <h1 class="band-style-title">Alternatif</h1> 
 
       <a href="band.link">Anberlin</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

問題は、あなたが並べ替えしようとしているありますオブジェクトではありません。配列ではありません。ですから、オブジェクトを使用してキーをソートしましょう。

$('document').ready(function() { 
 

 
    // here's the issue I was saying about 
 
    var elements = {}; 
 
    $('.bands-alphabetique').hide().find('[id*="band-style-"]').each(function(index) { 
 
    elements[ $(this).attr('id').split('-')[2] + '-' + index ] = $(this).find('.element'); 
 
    }); 
 

 
    var styles = Object.keys(elements); 
 
    styles.sort(); 
 

 
    styles.forEach(function(style) { 
 
    $('.large-centered.col-md-12.clearfix').append(elements[style]); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="large-centered col-md-12 clearfix"> 
 
    <div class="bands-alphabetique"> 
 
    <div class="col-md-3" id="band-style-rock"> 
 
     <div class="element"> 
 
     <h1 class="band-style-title">Rock</h1> 
 
     <a href="band.link">Fiction In Motion</a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3" id="band-style-pop"> 
 
     <div class="element"> 
 
     <h1 class="band-style-title">Alternatif</h1> 
 
     <a href="band.link">Anberlin</a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3" id="band-style-pop"> 
 
     <div class="element"> 
 
     <h1 class="band-style-title">Pop</h1> 
 
     <a href="band.link">Marianas Trench</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

問題は、配列をソートしていないということです。異なるプロパティ（スタイル+ ' - ' +インデックス）を持つオブジェクトがあります。

つまり、結合配列はJavascriptでは存在しません。あなたが本当に持っていたのは多くの特性を持つオブジェクトarrElementStyleでした。

$('document').ready(function(){ 
 
\t var arrElementStyle = []; 
 
\t $('.bands-alphabetique [id*="band-style-"]').each(function(index){ 
 
\t \t var style = $(this).attr('id').split('-')[2]; 
 
\t \t arrElementStyle[index] = $(this).find('.element'); 
 
\t \t arrElementStyle[index].bandStyle = $(this).find('.band-style-title')[0].innerHTML; 
 
\t }); 
 
\t arrElementStyle.sort(function(elementA, elementB){ 
 
     return elementA.bandStyle > elementB.bandStyle; 
 
    }); 
 
\t $('.bands-alphabetique').hide(); 
 
\t for(style in arrElementStyle){ 
 
    \t $('.large-centered.col-md-12.clearfix').append(arrElementStyle[style]); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="large-centered col-md-12 clearfix"> 
 
    <div class="bands-alphabetique"> 
 
\t <div class="col-md-3" id="band-style-rock"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Rock</h1> 
 
\t \t \t <a href="band.link">Fiction In Motion</a> 
 
\t \t </div> \t 
 
\t </div> \t 
 
\t <div class="col-md-3" id="band-style-pop"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Pop</h1> 
 
\t \t \t \t <a href="band.link">Marianas Trench</a> 
 
\t \t </div> \t 
 
\t </div> 
 
    <div class="col-md-3" id="band-style-pop"> 
 
\t \t <div class="element"> 
 
\t \t \t <h1 class="band-style-title">Alternatif</h1> 
 
\t \t \t \t <a href="band.link">Anberlin</a> 
 
\t \t </div> \t 
 
\t </div> 
 
    </div> 
 
</div>