数组排序前循环不保持数组排序

在您的代码中，您将arrElementStyle声明为数组，但稍后您将其用作插入数据的关联数组。因此最好将arrElementStyle声明为this的对象。

下面是一个示例演示，我认为您希望在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>

问题是您正在尝试对对象进行排序。不是数组。让我们使用一个对象并对它的键进行排序。

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

问题是您没有对数组进行排序。您有一个具有不同属性的对象(样式+ '-' +索引)。

也就是说，关联数组在Javascript中不存在。你真正拥有的是一个具有许多属性的对象arrElementStyle。

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