CODEWITHSUNDEEP
javascriptjqueryarrayssorting
Myriam Lefebvre
Myriam Lefebvre

Reputation: 123

Array sort before looping not keep the array sort

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.

Upvotes: 0

Views: 76

Answers (3)

four
four

Reputation: 564

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>

Upvotes: 1

freedev
freedev

Reputation: 30027

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>

Upvotes: 1

Eduard
Eduard

Reputation: 3576

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>

Upvotes: 1

Related Questions