Question

我有一个标识为wrapper的div，我正在使用.append()在该div的末尾插入一些内容，如下所示：

$("#wrapper").append('Some divs and input fields');

但是，我还希望在包装器中聚焦content div之后插入一个新子项。

因此，如果HTML输出如下所示：

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
             First div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second div
            <input type="text" />
        </div>
    </div>
</div>

第一个content div中的输入字段是焦点，我想在该div之后插入一个元素，所以我得到了这个：

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
             First div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second div
            <input type="text" />
        </div>
    </div>
</div>

我该怎么做？

Answer 1

$(':focus')将为您提供焦点元素，closest('.content')为其祖先提供类content，然后使用after插入元素。

$(':focus').closest('.content').after(whatever_element_you_want_to_add);

Answer 2

正如你所说

按Enter键触发追加功能。

您可以尝试使用此代码。在enter key上按input时会触发它：

HTML：

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
             First div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second div
            <input type="text" />
        </div>
    </div>
</div>

JS：

    $('#wrapper').on("keyup",'input',function(e){
    if(e.keyCode == 13)
    {
        $(this).closest('.content').after("<div class='content'> <div class='subcontent'>Some div<input type='text' /> </div></div>")
    }
});

Fiddle

在专注的孩子后追加

2 个答案: