javascript - 循环之前的数组排序无法保持数组排序

我有这段代码，他们只是用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时，结果不是排序？（我想按音乐风格排序）为什么？想要我做。

最佳答案

在代码中，您将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>

关于javascript - 循环之前的数组排序无法保持数组排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40667774/