Array-Sortierung Animation

Question

Ich muss mit Hilfe der Animation Display-Array-Sortierung. Ich erstelle ein Array. Ich fülle es mit Zufallszahlen und gleichzeitig ein Element auf der Seite zu erstellen. Es scheint alles ist wie es sollte. Aus irgendeinem Grund ist es jedoch unmöglich, den Inhalt des Tags zu durchsuchen. Ein Fehler.

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 1

Sie verwenden nicht jQuery Selektoren richtig, wenn Sie die Wähler an die changeElem Parameter übergeben, müssen Sie nicht $ enthalten (und) . Das sollte funktionieren. Außerdem wird dadurch Ihr aktuelles Problem behoben, aber Ihr Programm ist insofern fehlerhaft, als Sie Elemente in einer .sort() - Funktion vergleichen. Es ist wahrscheinlich besser, wenn Sie Ihren eigenen Sortieralgorithmus implementieren.

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>