Array sort before looping not keep the array sort

Question

I have this code who simply create a array with html element and loop for parse the sort array.

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

When I parse the html the result is not sort?(I want sort by style of music) Why? Want should I do.

your array is empty. You will never be able to sort an empty array — HenryDev
– HenryDev, Commented Nov 18, 2016 at 1:18

four · Accepted Answer · 2016-11-18 01:58:04Z

in your code you declared arrElementStyle as an array, but later you used it as an associative array for inserting data. So it is better to declare arrElementStyle as an object for this.

Here is an example demo of what I think you wanted to achieve with the help of sort() for sorting the objects keys:

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

Eduard · Accepted Answer · 2016-11-18 01:51:50Z

Issue is you're trying to sort an object.. not an array. So let's use an object and sort it's keys.

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

freedev · Accepted Answer · 2016-11-18 01:52:39Z

The problem is that you're not sorting an array. You have an object with different properties (style + '-' + index).

In other words, associative array does not exists in Javascript. What you really had was an object arrElementStyle with many properties.

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

Collectives™ on Stack Overflow

Array sort before looping not keep the array sort

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related