Question

我想load()一些我需要嵌入三个（！）包装器的外部html。这是我需要的结果：

<body>
    <section class="page">
        <div class="wrapper">
            <div class="backdrop">
                <!-- Loaded HTML -->
            </div>
        </div>
    </section>
</body>

以下代码运行正常并且看起来很干净，但是，我想添加许多<section>，因此以某种方式链接那些append()和load()会更好：

$('body')        .append('<section class="page"></section>');
$('section.page').append('<div class="wrapper"></div>');
$('div.wrapper') .append('<div class="backdrop"></div>');
$('div.backdrop').load  ('partials/test.html');

我找到了一些链接append()的示例，但是，我没有将它们与load()结合起来。

提前致谢！：）

Answer 1

不需要使用三个单独的append调用，正如您所指出的那样，如果添加多个部分，编码方式将不起作用。

相反，创建完整的片段片段，将其附加到正文，然后加载到背景中：

$(
'<section class="page">' +
    '<div class="wrapper">' +
        '<div class="backdrop"></div>' +
    '</div>' +
'</section>'
)
.appendTo('body')
.find('div.backdrop')
.load('partials/test.html');;

如果将HTML与代码分开，那就更清晰了，例如：

var sectionTemplate = 
    '<section class="page">' +
        '<div class="wrapper">' +
            '<div class="backdrop"></div>' +
        '</div>' +
    '</section>';

然后

$(sectionTemplate)
.appendTo('body')
.find('div.backdrop')
.load('partials/test.html');;

三个append（）之后的.load（）html

1 个答案: