在ul后面添加一个表单

Add a form after ul

本文关键字：一个 表单 ul 添加      更新时间：2024-04-26

如何在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列表后添加表单，目前是在文章后插入的。

这里是演示：演示

编辑：

如果文章后面的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>');
    }
});

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

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

更新的小提琴

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

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

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

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

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

$('.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>');
    }
});
相关文章：