获取 JQuery 个带 ID 的可排序 div 的顺序

Question

我目前有一组div如下：

  <ol id ="listOfApplied">
    <div id ="modalBody">
        <li id ="1"><div class='myDiv' id ="id1"><h4>Item 1</h4>
        </div>
        </li>
        <li id ="2"><div class='myDiv' id ="id2"><h4>Item 2</h4>
        </div>
        </li>
        <li id ="3"><div class='myDiv' id ="id3"><h4>Item 3</h4>
        </div>
        </li>

    </div>
  </ol>

目前这是在模式中显示的 window 当我点击保存按钮时我想获得列表的顺序，但我需要的是 li id（为了知道它的位置) 和 div id 以了解 li 引用的内容。现在我拥有的是：

$("#listModalBody").on("click","#saveOrder", function(){


            $("#listOfApplied").sortable({
          });
          var listElements =  $("#listOfApplied").sortable("toArray") ;
           console.log(listElements);


    });

但这只是 returns 一个包含许多字段的庞大复杂数组。有没有办法只获取我需要的信息？提前致谢！

更新-我的保存功能：

  $(function() {
  $("#listModalBody").on("click","#saveOrder", function(){


      var ordered_divs= [];
      $("#listOfApplied li").sort(function (a, b) {
          return parseInt(a.id) > parseInt(b.id);
      }).each(function () {
          console.log($(this).text());
          ordered_divs.push({li_id: $(this).prop('id'), div_id: $(this).find('div').prop('id')});
      });
      console.log(ordered_divs);

    });
  });

Answer 1

var ordered_divs= [];
 var positions;

  $( "#listOfApplied").sortable({
       update: function(event, ui) {
              $('#listOfApplied li').each( function(e) {
                  console.log({li_id: $(this).prop('id'), div_id: $(this).find('div').prop('id')});
                  ordered_divs.push({li_id: $(this).prop('id'), div_id: $(this).find('div').prop('id')});
               });
              positions = ordered_divs.join(';')
             }
  });

$('#GetOrder').on('click',function(){
  console.dir(positions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul id ="listOfApplied">
        <li id ="1"><div class='myDiv' id ="id1"><h4>Item 1</h4>
        </div>
        </li>
        <li id ="2"><div class='myDiv' id ="id2"><h4>Item 2</h4>
        </div>
        </li>
        <li id ="3"><div class='myDiv' id ="id3"><h4>Item 3</h4>
        </div>
        </li>
  </ul>
  <button id="GetOrder">Get Order</button>

获取 JQuery 个带 ID 的可排序 div 的顺序

Get order of JQuery sortable divs with ID's

jquery

list

jquery-ui-sortable