jquery - '奇怪的' .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元素的情况。