在半div上插入元素

时间:2016-10-21 10:36:39

标签: javascript jquery html

我尝试在div的一半上插入一个元素(例如div),然后在双<br />元素之后插入

这里我的代码只是一个例子,div可能更长或更小

<html>
<head>
    <title></title>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
        console.log( "ready!" );

        var h_div = $('#my_post').height();

    });

    </script>
</head>
<body>
    <div id='container'>
        <div id='my_post'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br /><br />

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br /><br />

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br /><br />


        </div>
    </div>
</body>
</html>

我应该在Jquery中使用position()函数吗?

1 个答案:

答案 0 :(得分:2)

怎么样:

$('br:eq(1)', '#my_post').after('<div>whatever ...</div>');

这会在第二个&lt; br&gt;

之后在#my_post中插入一个div

好的,让我们再打破一点:

$('br')是一个jquery选择器,它返回所有&lt; br&gt;的集合。文件中的元素。因为你只需要&lt; br&gt;在特定容器中,我们将搜索限制为此容器:$('br', '#my_post')。现在你有一个所有&lt; br&gt;的集合。 div中的元素#my_post。现在我们添加过滤器:eq(),它只选择&lt; br&gt;中的特定一个。元素。因为:eq()是基于零索引的,我们使用数字1得到第二个&lt; br&gt;元件。

现在我们使用jquery方法.after()在我们使用选择器$('br:eq(1)', '#my_post')

指定的元素之后插入内容

您可能需要查看jquery文档:http://api.jquery.com/after/