javascript - 根据 sibling 的id，用jQuery选择列表中的<li>插入位置

Question

我有一个常规的 html 有序列表:

<nav id="global_nav">
    <ol class="menu">
    <li id="Section1">Section1</li>
    <li id="Section2">Section2
    <ol>
        <li id="subsection1">Subsection1</li>
            <li id="subsection2">Subsection2</li>
           <li id="subsection3">Subsection3</li>
      </ol>
      </li>
      <li id="Section3" >Item3</li>
  </ol>
</nav>

我也制作了一个小的 html 表单:

<form>
    <label for="nuevo">Insert</label>
    <input type="text" id="nuevo">
    <label for="despues">After the section</label>
    <input type="text" id="despues">
    <input type="button" id="btn" value="Insert">
</form>

重点是能够使用 jQuery 动态地填充列表。例如，如果在文本字段 1 中输入“Section4”，在文本字段 2 中输入“Section3”，则该函数将添加新的 <li>在已存在的“Section3”之后添加文本“Section4”的元素。

我已经这样做了，而且效果还不错:

    $("#btn").click(function(){

    var nuevo=$('#nuevo').val();
    //var despues=$('#despues').val();
    var nl = $('<li></li>').text(nuevo).attr('id', nuevo ).slideDown();

    $(".menu").append(nl);

但是正如您所看到的，我已经注释掉了获取第二个文本字段的值的行，因为我无法理解应该如何引用将确定新项目的位置的同级项目。例如，如果我附加的第一个项目是“Section7”并且它附加到列表的最底部，那么我如何稍后在“Section7”之前附加“Section6”？

您认为我需要使用哪些 jQuery 函数才能完成此任务？到目前为止我只了解一点纯javascript。我试图理解 jQuery 的所有很酷的东西，但在这种情况下，我在文档中发现了很多显然非常相似的函数，所以我很困惑。

谢谢!

Answer 1

这是一个相同的 fiddle 。我希望这有帮助。 http://jsfiddle.net/zy1f7ohc/5/

$("#btn").click(function(){

    var nuevo=$('#nuevo').val();
    var despues=$('#despues').val();

     $('<li></li>').text(nuevo).attr('id', nuevo).insertAfter("#"+despues);

 });