たとえば、次のようなものがあります:
<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 コードをコピーして貼り付けるという単純な行為は、私を悲鳴をあげて髪の毛を抜きたくなるほど恐ろしいので、これ以上いじくり回すのに時間を費やしたくありません。
ベストアンサー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>");
}
編集: NaN エラーを回避するために、nth-child セレクターに括弧を追加しました。@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>