CODEWITHSUNDEEP
javascriptjqueryarrays
Aleksandr
Aleksandr

Reputation: 437

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

Upvotes: 0

Views: 615

Answers (1)

Joe Thomas
Joe Thomas

Reputation: 6437

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>

Upvotes: 1

Related Questions