Array sortieren vor dem Schleifen nicht halten das Array sortieren

Question

Ich habe diesen Code, der einfach ein Array mit HTML-Element und eine Schleife zum Parsen der Sortierung Array erstellen.

$('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>

Wenn ich die html das Ergebnis zu analysieren ist nicht sortieren? (Ich von Musikstil sortieren will) Warum? Willst du, dass ich es tue?

Answer 1

In Ihrem Code haben Sie arrElementStyle als Array deklariert, aber später haben Sie es als assoziatives Array zum Einfügen von Daten verwendet. Daher ist es besser, arrElementStyle als Objekt dafür zu deklarieren. Hier

ist ein Beispiel Demo von dem, was ich denke, Sie mit Hilfe von sort() zum Sortieren der Objekte Tasten erreichen wollte:

$('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

Ausgabe wird Sie versuchen, eine sortieren Objekt .. kein Array. Lassen Sie uns also ein Objekt verwenden und seine Schlüssel sortieren.

$('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

Das Problem ist, dass Sie nicht ein Array zu sortieren. Sie haben ein Objekt mit verschiedenen Eigenschaften (Stil + '-' + Index).

Mit anderen Worten, assoziative Array ist nicht in Javascript vorhanden. Was Sie wirklich hatten, war ein Objekt arrElementStyle mit vielen Eigenschaften.

$('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>