Javascript как правильно отсортировать div элементы?

Question

[kapai69]

Надо отсортировать элементы с одним классом по возрастанию их id!

<div class="main">
        <div class="cild" id="2">2</div>   
        <div class="cild" id="3">3</div>   
        <div class="cild" id="1">1</div>   
        <div class="cild" id="24">24</div>   
    </div>

Должно получиться

<div class="main">
        <div class="cild" id="1">1</div>   
        <div class="cild" id="2">2</div>   
        <div class="cild" id="3">3</div>   
        <div class="cild" id="24">24</div>   
    </div>

Написал код

$(function () {
    var div_conteiner = jQuery.makeArray($('.main div'));
    div_conteiner.sort(function (a, b) {
        var an = a.id,
            bn = b.id;
            var c = 0
            if (an > bn) c = 1;
            if (an < bn) c = -1;
            return c
    });

    $.map(div_conteiner, function (div) {
        $(div).appendTo($('.main'))
    });

});

Но в итоге получается

<div class="main">
        <div class="cild" id="1">1</div>   
        <div class="cild" id="2">2</div>   
        <div class="cild" id="24">24</div>   
        <div class="cild" id="3">3</div>   
    </div>

Где ошибка?

Answer 1

[iDennis]

Ошибка в то что нужно an и bn перевести в число parseInt(str)

Answer 2

[Rad1calDreamer]

он id воспринимает как строку

Answer 3

[YemSalat]

В parseInt() нужно добавить radix. Like this - parseInt("1000", 10)

Answer 4

[Memfisrain]

var an = a.id,
      bn = b.id;
      var c = 0
      if (an > bn) c = 1;
      if (an < bn) c = -1;
      return c

Можно свести эту кучу кода к одной строке: return a.id - b.id