Question

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

<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>

我希望像

之间的其他div一样元素化html元素

<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-f f-cover div旁边没有插入任何内容。

Answer 1

首先在你的帖子中忘记了$(result_html).insertAfter( ".f-page f-cover" );

的第二个点

接下来，即使您添加此点（如此$(result_html).insertAfter( ".f-page .f-cover" );），您也将访问具有类'f-cover'的元素'f-cover'的元素。但这不是你需要的。

这就是你所需要的 -

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

Answer 2

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

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

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

这将在具有id：

的元素之后插入

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

两者都很好：Demo

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

2 个答案: