在ul后面加一个表格

Question

如何在 ul 后添加表格？这是我的代码：

<article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae possimus dolore perferendis vel magni odio in architecto corrupti consequuntur.

    <a class="open" href="#">Add comment</a>
</article>
<ul class="children">
    <li>Lorem ipsum dolor sit amet, consectetur.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

<hr>

<article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae possimus dolore perferendis vel magni odio in architecto corrupti consequuntur.

    <a class="open" href="#">Add comment</a>
</article>
<ul class="children">
    <li>Lorem ipsum dolor sit amet, consectetur.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

和jquery：

$('.open').on('click', function(event) {
    event.preventDefault();

    $(this).parent().after('<form><input type="text"></form>');
});

问题是：如何在 ul 列表后添加表格，目前插入在文章后。

这是演示：DEMO

编辑：

如果文章后面的ul不存在，如何在文章后面添加表格？

答案：

$('.quick_reply').on('click', function(event) {
    event.preventDefault();

    if ($(this).parent().next('ul').length > 0) {
        $(this).parent().next('ul').after('<form><input type="text"></form>');
    } else {
        $(this).parent().after('<form><input type="text"></form>');
    }

});

Answer 1

您可以使用 next('ul') 查找与 a 相关的 ul:

$(this).parent().next('ul').after('Form after ul');

Updated fiddle

我显然在这里假设 Form after ul 只是您用来使问题更清楚的占位符，并且您的实际代码确实包含 form、

Answer 2

$('<form>').insertAfter($(this).closest('article').next('ul'));

演示： http://jsfiddle.net/9q1aao0e/3/

Answer 3

http://api.jquery.com/insertafter/

.insertAfter() jQuery 方法应该按照上面 jQuery 文档中给出的示例工作。

Answer 4

$('.open').on('click', function(event) {
    event.preventDefault();

    if ($(this).parent().next('ul').length > 0) {
        $(this).parent().next('ul').after('<form><input type="text"></form>');
    } else {
        $(this).parent().after('<form><input type="text"></form>');
    }

});

在ul后面加一个表格

Add a form after ul

html

javascript

jquery

append