Question

http://jsfiddle.net/DerekL/whY4B/

$("p").each(function(i) {
    var btn = $('<button>button</button>'),
        span = $('<span>span</span>');
    $(this).after(btn).after(span);
});

所以我的HTML中有<p>个，我使用.after()来创建按钮和跨度：

$(this).after(btn).after(span);

btn排在第一位，span排在最后。但结果恰恰相反：btn排在最后，span排在第一位。

到底是什么？怎么会这样，而且非常令人困惑。请帮忙。

Answer 1

.after() method在您调用它的元素之后立即插入作为参数传递的元素。因此，在您的代码中，第一个.after()插入btn，使其紧跟在<p>之后，然后第二个调用会插入span，以便它紧跟在<p>之后

显然，对此的修复是以相反的顺序添加它们。

请注意，结果将是：

<p>your para content</p>
<button>button</button>
<span>span</span>

即，新元素确实在之后添加而不是作为段落的子元素。如果您使用.append()，则会将其添加为子项，因此

$(this).append(btn).append(span); // will give you <p>your original para content <button>button</button> <span>span</span> </p> // (indenting added just for clarity)

另请注意，如果您要为每个段落添加完全相同的内容，则不需要.each()，因为这样做也会这样做：

var ele = $('<button>button</button>'), span = $('<span>span</span>'); $("p").after(span).after(ele);

http://jsfiddle.net/nnnnnn/whY4B/7/

Answer 2

就像那样，因为after会插入您的内容，但会返回原始元素即段落。所以你的代码说“在p之后插入这个按钮”然后“在p之后插入这个跨度”（这也恰好在按钮之前）。

要获得您想要的内容，请将这两项都传递给after：

$(this).after(btn,span);

怎么会这样？

2 个答案: