“‘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元素多的情况。