Question

我有一段HTML位于一个单独的文件中，我希望将其加载到当前页面并多次附加到div。

for和append以及clone的任意组合似乎只会附加一个HTML实例。

外部HTML

<article class="article">
    <section class="section">
        <h1>Title</h1>
    </section>
</article>

的jQuery

function loadContent() {
    var instances = 2;
    var list = $('<section id="list-view">');
    var downloads = $('#downloads');

    downloads.empty();
    list.load('filename.html .card', function() {
        for (var i = 0; i < instances; i++) {
            downloads.append(list);
        }
    });
}

loadContent();

HTML

<article id="downloads"></article>

结果我正在努力实现

<article id="downloads">
    <section id="list-view">
        <article class="article">
            <section class="section">
                <h1>Title</h1>
            </section>
         </article>
         <article class="article">
            <section class="section">
                <h1>Title</h1>
            </section>
         </article>
         <article class="article">
            <section class="section">
                <h1>Title</h1>
            </section>
         </article>
    </section>
</article>

Answer 1

我会使用常规$.get()来获取外部HTML，然后在循环中附加它：

$.get("filename.html").then(function(data) {
  $(data).find(".card").each(function() {
    downloads.append(this.innerHTML)
  })
})

多次附加加载的HTML

1 个答案: