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

修改

如果篇篇文章不存在后，如何在文章之后添加表单？

解答：

$('.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')查找与ul相关的a：

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

Updated fiddle

我很明显在这里假设Form after ul只是一个占位符，用于使您的问题更加清晰，并且您的实际代码确实包含form，

Answer 2

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

DEMO： 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之后添加一个表单

4 个答案: