javascript - 根据属性值在另一个元素之前插入元素

Question

我动态创建了一个 DIV，并希望根据它们的属性值在其他 Div 之间定位。

我想按顺序排列。

<div data-door="1">1</div>
<div data-door="3">3</div>
<div data-door="4">4</div>
<div data-door="6">6</div>

我的下面的代码有效，但在某些时候中断，新的 div 开始乱序。

乱序的例子 1个 2个 2个 3个 4个 5个 4

<input id="txtValue" type="text" > 
<button id="addMe">Add</button>
<div id="container">
    <div data-door="3">3</div>
</div>

$("#addMe").click(function(){
    var strValue = $("#txtValue").val()
    var newDiv = '<div data-door="' + strValue + '">'+ strValue +'</div>'

    //loop thru all divs with data-door
    $('*[data-door]').each(function(){
        console.log($(this).attr("data-door"))
        if ( $(this).attr("data-door") >= strValue ) {

            $(this).prepend(newDiv)
            return false; 
        }
        else{
            $("#container").append(newDiv)
            return false; 
        }

    });

});

这是 JSFiddle https://jsfiddle.net/czcz/1sg5gyqj/26/

我不明白为什么会这样

Answer 1

太复杂了:

$("#addMe").click(function(){
	var strValue = $("#txtValue").val();
	var str = '<div data-door="' + strValue + '">'+ strValue +'</div>';
  var wrapper = $('#container');
  $(wrapper).append(str);
  $('div[data-door]').sort(sortIt).appendTo(wrapper);
});
   
function sortIt(a, b){
    return ($(b).data('door')) < ($(a).data('door')) ? 1 : -1;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="txtValue" type="text" > 
<button id="addMe">Add</button>

<div id="container">

</div>