遍历嵌套的“ ul”并通过ajax保存数据

Question

我需要将数据保存在嵌套的ul中。我想先检查深度级别，然后从顶部开始并将每个ul与position分别保存。这样的话，当我从数据库中检索数据时，我知道在哪里追加哪个ul等。有人可以请检查一下代码并告诉我我的方法是否正确。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="start">
  <li>1</li>
</ul>
<ul>
  <li>1.1</li>
</ul>
<ul>
  <li>1.2</li>
</ul>
<ul>
  <li>1.2.1</li>
</ul>
<ul>
  <li>1.2.2</li>
</ul>
<ul>
  <li>1.2.2.1</li>
</ul>
<ul>
  <li>1.3</li>
</ul>

function myf() {
  var i;
  for (i = 0; i < 5; i++) {
    var c = document.getElementById("start");
    var x = c.getElementsByTagName("UL").length;

    for (j = 0; j < x; j++) {
      var position = i + "_" + j; // here actually what I want to save is the depth level and the child node index 

      var y = c.getElementsByTagName("UL")[j];
      var name = y.getElementsByTagName("LI")[0];

      $(document).ready(function() {
        $.ajax({
          url: "{% url 'save_data' %}",
          type: "POST",
          data: {
            csrfmiddlewaretoken: '{{ csrf_token }}',
            "position": position,
            "Name": name
          },
          async: false,
        });
      });
    }
  }