Array sorting animation

I need to with the help of animation display array sorting. I create an array. I fill it with a random numbers and at the same time to create an element on the page. It seems everything is as it should. But for some reason it is impossible to search the contents of the tag. An error.

function changeElems(firstElem, secondElem) {
  var firstElemCoords = $(firstElem).offset();
  var secondElemCoords = $(secondElem).offset();
  
  $(firstElem).animate({
    left: secondElemCoords.left - firstElemCoords.left  + 'px',
    top: secondElemCoords.top + 'px'
  });

  $(secondElem).animate({
    left: firstElemCoords.left - secondElemCoords.left + 'px',
    top: firstElemCoords.top + 'px'
  });
}

// changeCircle($('.circle')[0], $('.circle')[1]);

var array = [];

for (var i = 0; i < 5; i++) {
  var number = Math.floor( Math.random() * 50 );
  $('body').append( $('<div class="circle">').text(number) );
  array.push( number );
}

array.sort(function(a, b) {
  if (a < b) changeElems( "$('.circle:contains(" + a + ")')",  "$('.circle:contains(" + b + ")')");
  return a - b;
});
.circle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: white;
  float: left;
  margin-right: 5px;
  position: relative;
}

.circle:last-child {
  margin-right: 0;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Sandbox: http://jsbin.com/dolucojahi/edit?js,output

Answer

You’re not using jQuery selectors properly, when you pass the selectors to the changeElem parameters, you don’t need to include $( and ). This should work. Also, this will fix your current problem, but your program is fundementally flawed in that you’re comparing elements in a .sort() function. It’s probably better if you implement your own sorting algorithm.

function changeElems(firstElem, secondElem) {
  var firstElemCoords = $(firstElem).offset();
  var secondElemCoords = $(secondElem).offset();
  
  $(firstElem).animate({
    left: secondElemCoords.left - firstElemCoords.left  + 'px',
    top: secondElemCoords.top + 'px'
  });

  $(secondElem).animate({
    left: firstElemCoords.left - secondElemCoords.left + 'px',
    top: firstElemCoords.top + 'px'
  });
}

// changeCircle($('.circle')[0], $('.circle')[1]);

var array = [];

for (var i = 0; i < 5; i++) {
  var number = Math.floor( Math.random() * 50 );
  $('body').append( $('<div class="circle">').text(number) );
  array.push( number );
}

array.sort(function(a, b) {
  if (a < b) changeElems('.circle:contains(' + a + ')', '.circle:contains(' + b + ')');
  return a - b;
});
.circle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: white;
  float: left;
  margin-right: 5px;
  position: relative;
}

.circle:last-child {
  margin-right: 0;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Leave a Reply

Your email address will not be published. Required fields are marked *