循环前的数组排序不保留数组排序

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>