javascript - ul-li。新的相等行(li)，如下

Question

有什么建议吗？

1. 我希望在使用“新建”按钮时在同一个 li 下创建一个新的 li。在我的示例中，.append 在底部创建新的 li。

2. 按钮(new、sub、up、down 和 x)应该出现在新的 li 中，如何？

如果这个问题需要大量且相当实质性的回应，我表示歉意，但我不希望有人给出回应。然后，如果这些列表属性需要其他类型的编码(.net 等)，我很高兴能得到启发......

谢谢大卫

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul style="text-decoration:none">

  <li>..............
    <button id="btn2">New</button>
    <button id="btn3">Sub</button>
    <button class="up">Up</button>
    <button class="down">Down</button>
    <button>X</button>
  </li>

  <script>
    $(document).ready(function() {
      $("#btn2").click(function() {
        $("ul").append("<li>..............</li>");
      });
    });
  </script>

  <script>
    $(document).ready(function() {

      $("#btn3").click(function() {
        $("ul").append("<ul><li>..............</li>");
      });
    });
  </script>

  <script>
    $('.up').click(function() {
      $(this).parent().insertBefore($(this).parent().prev());
    });

    $('.down').click(function() {
      $(this).parent().insertAfter($(this).parent().next());
    });
  </script>

  <script>
    $("button").click(function() {
      $("<li>").remove();
    });
  </script>

</ul>

Answer 1

不要将其附加到 ul，而是将其插入到当前 li 元素之后。

您还可以克隆和添加按钮，并使用事件委托(delegate)来处理新按钮中的点击

$(document).ready(function() {
  $("ul").on('click', '.btn2', function() {
    $("<li/>", {
      text: '..............'
    }).append($(this).parent().children('button').clone()).insertAfter(this.parentNode);
  });
});

$(document).ready(function() {

  $("#btn3").click(function() {
    $("ul").append("<ul><li>..............</li>");
  });
});

$('ul').on('click', '.up', function() {
  $(this).parent().insertBefore($(this).parent().prev());
});

$('ul').on('click', '.down', function() {
  $(this).parent().insertAfter($(this).parent().next());
});

$('ul').on('click', '.remove', function() {
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul style="text-decoration:none">

  <li>..............
    <button class="btn2">New</button>
    <button class="btn3">Sub</button>
    <button class="up">Up</button>
    <button class="down">Down</button>
    <button class="remove">X</button>
  </li>



</ul>