将 html 元素插入到具有多个类的另一个 html 元素中

Question

我正在开发一个网络应用程序，该应用程序包含以下元素：

<div id="flip" class="container">
        <div class="f-page f-cover" id="cover">
            <div class="cover-elements">
                <div class="f-cover-story">
                    <span>Life Events</span>Photo Album
                </div>
            </div>
            <div class="f-cover-flip">&lt; swipe</div>
        </div>

        <div class="f-page f-cover-back">
            <div id="codrops-ad-wrapper">
                <a href="index.jsp" >Back to bookshelf</a>
            </div>
        </div>
    </div>

我想在html元素之间像其他div一样元素

<div class="f-page f-cover" id="cover">
                <div class="cover-elements">
                    <div class="f-cover-story">
                        <span>Life Events</span>Photo Album
                    </div>
                </div>
                <div class="f-cover-flip">&lt; swipe</div>
            </div>

和

<div class="f-page   f-cover-back">
                    <div id="codrops-ad-wrapper">
                        <a href="index.jsp" >Back to bookshelf</a>
                    </div>

            </div>

为此，我搜索了 jquery 框架并找到了 .insertAfter 方法。

所以这是我迄今为止尝试过的：

$(result_html).insertAfter( "#cover" );

其中 result_html 是我的字符串，其中加载了我要添加的 html 元素

和

$(result_html).insertAfter( ".f-page f-cover" );

在第一个中，我尝试将它与我想将其放在旁边的 div 的 id 一起添加，第二个是我所引用的类。

虽然在 jquery insertafter method 中使用了 div 的类，但在我的例子中，我的 div 有 2 个类名。

我该如何解决这个问题？目前在 f-page f-cover div 旁边没有插入任何内容。

Answer 1

如果您选择具有多个类的元素，则不能在这些类之间使用空格。这将选择parent children。

这将在两个类的元素之后插入：

$(result_html).insertAfter( ".f-page.f-cover" );

这将在具有 id 的元素之后插入：

$(result_html).insertAfter( "#cover" );

两者都可以正常工作：Demo

Answer 2

首先在您的帖子中，您忘记了$(result_html).insertAfter( ".f-page f-cover" ); 的第二个点

接下来，即使您添加了这个点（例如 $(result_html).insertAfter( ".f-page .f-cover" );），您也将访问具有类“f-cover”的元素，该元素位于具有类“f-page”的元素内部。但这不是你需要的。

这就是你需要的——

$(result_html).insertAfter( ".f-page.f-cover" );