循環前的數組排序不保留數組排序

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

的問題是，你不排序的數組。你有一個具有不同屬性的對象（style +' - '+ index）。

換句話說，關聯數組在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>