Получить div, добавленные jquery

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>

Сравнить textContent элементов div в функции

Answer 2

Вы можете использовать $.each для перебора l oop по div'ам в #test Попробуйте следующий код:

$.each($("#test div", function(){
 console.log($(this))
})

Answer 3

Вы можете увидеть следующий ответ:)

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

  $("#test").children("div").each(function() {
      //Each element of child/appended child
      var el = $(this);
      //Console content of each children
      console.log(el.html());
  });
});

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

Answer 4

@ whitebear, проверьте, работает ли у вас следующий код:

$(function() {

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

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