javascript - 检索jquery附加的div

Question

我附加一些<div>动态元素。现在我想获取我附加的项目数组，但是此代码不起作用。它只是返回 0 .

$(function() {
  $("#test").append("<div>div1</div>");
  $("#test").append("<div>div3</div>");
  $("#test").append("<div>div2</div>");

  $("#test").each(function(v) {
    console.log(v); // I want to sort the items....
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="test"></div>

Answer 1

当新元素追加到父元素时，使用 DOMNodeInserted 事件调用函数:

 var arr =[];
 $("#test").on("DOMNodeInserted",function() {
     //console.log(event.target);
     arr.push(event.target);
  });
  $("#test").append("<div>div1</div>");
  $("#test").append("<div>div3</div>");
  $("#test").append("<div>div2</div>");

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="test">
  <div>exception</div>
</div>

对数组进行排序:

var arr = [];
$("#test").on("DOMNodeInserted", function() {
    //console.log(event.target);
    arr.push(event.target);
    arr.sort(function(f, n) {
        return $(f).text().replace(/div(\d+)$/, "$1") - $(n).text().replace(/div(\d+)$/, "$1");
    });

});
$("#test").append("<div>div1</div>");
$("#test").append("<div>div3</div>");
$("#test").append("<div>div2</div>");

console.log(arr); //sorted array contains object HTMLDivElement(s)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="test">
</div>

在函数中比较div元素的textContent