jQuery 插入 div 作为特定索引

Question

假设我有这个:

<div id="controller">
 <div id="first">1</div>
 <div id="second>2</div>
</div>

但是假设我想根据我提供的索引任意插入一个新的 div。

假设我给插入索引0，结果应该是:

<div id="controller">
  <div id="new">new</div>
  <div id="first">1</div>
  <div id="second">2</div>
</div>

如果我要插入 2 的索引，结果将是。

<div id="controller">
  <div id="first">1</div>
  <div id="second">2</div>
  <div id="new">new</div>
</div>

如果我给出的索引为 1，结果将是:

<div id="controller">
  <div id="first">1</div>
  <div id="new">new</div>
  <div id="second">2</div>
</div>

只是忘记最后一个例子的格式。在这个网站上复制和粘贴 HTML 代码的简单行为足以让我尖叫并拔掉我的头发，我不想再花时间搞砸了!

Answer 1

作为一个更好地处理 0 的函数:

function insertAtIndex(i) {
    if(i === 0) {
     $("#controller").prepend("<div>okay things</div>");        
     return;
    }


    $("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}

编辑:在第 n 个子选择器中添加括号以避免 NaN 错误。 @hofnarwillie

function insertAtIndex(i) {
  if(i === 0) {
    $("#controller").prepend("<div>okay things</div>");        
    return;
  }


  $("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}

window.doInsert = function(){
  insertAtIndex(2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="controller">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
<button onclick="doInsert()">Insert "great things" at index 2.</button>