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

Question

我有这段代码，它只是用 html 元素创建一个数组并循环解析排序数组。

$('document').ready(function(){
	var arrElementStyle = [];
	$('.bands-alphabetique [id*="band-style-"]').each(function(index){
		var style = $(this).attr('id').split('-')[2];
		arrElementStyle[style + '-' + index ] = $(this).find('.element'); 
	});
	arrElementStyle.sort();
	$('.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>

当我解析 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(){
	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>