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 五的 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>

Answer 2

你在循环中的两种情况都返回false，导致它在第一次迭代后中断。这有效：

$("#addMe").click(function(){
  var strValue = $("#txtValue").val();
  var str = '<div data-door="' + strValue + '">'+ strValue +'</div>';
  if($.trim($("#container").html())==''){ 
    $('#container').append(str);
  } else {
    //loop thru all divs with data-door
    var added = false;

    $('*[data-door]').each(function(){
      console.log($(this).attr("data-door"))
      if ( $(this).attr("data-door") >= strValue ) {
        $(this).prepend('<div data-door="' + strValue + '">'+ strValue +'</div>')
        added = true;
        return false; 
    }});

    if (!added) {
      $("#container").append(str)
    }
  }
});

基于属性值在另一个之前插入元素

2 个答案: