Поведение Wierd.insertAfter()

Question

Я пытаюсь вставить некоторые элементы между моими абзацами... - но это не совсем так, как задумано:

Я хотел бы увидеть что-то вроде этого:

<p>Text1.</p>
    <span>test1</span> <--injected element
<p>Text2.</p>
    <span>test2</span> <--injected element
<p>Text3.</p>
    <span>test3</span> <--injected element
<p>Text4.</p>
    <span>test4</span> <--injected element
    <span>test5</span> <--injected element
    <span>test6</span> <--injected element

Но результат выглядит немного иначе:

<p>Text1.</p>
<span>test6test5test4test3test2test1</span>
<p>Text2.</p>
<span>test6test5test4test3test2test1</span>
<p>Text3.</p>
<span>test6test5test4test3test2test1</span>
<p>Text4.</p>
<span>test6test5test4test3test2test1</span>

Мой код выглядит так:

$(document).ready(function() {  
            var xArray = 
            [
                "test0",
                "test1",
                "test2",
                "test3",
                "test4"
            ];
            $.each(xArray, function (index, value) {
                $("<span>" + value + "<span>").insertAfter(".articleText p");
            }); 
        });

Что делать / менять...?

Answer 1

        var $paragraphs = $(".articleText p");

        $.each(xArray, function (index, value) {
            $("<span>" + value + "<span>").insertAfter($paragraphs.eq(index));
        }); 

Вы вставляете элемент после ВСЕХ p теги вместо конкретного, который вы хотите. Ты можешь использовать eq выбрать правильный p элемент.

Вам также придется иметь дело со случаем, когда в вашем массиве больше элементов, чем у вас. p элементы.