如何在jQuery中使用“追加”创建多个DIV？

Question

我想循环多个DIV元素。

有5本书。 我想循环5本书中的ID： BootLoop 。

我尝试了什么？

my_orders.append(data[i].order.bname).appendTo("#bookLoop > div > div > div > h3");

my_orders.append(data[i].order.blink).appendTo("#bookLoop > div > div > div > a");

没用 我在哪里出错？

JS：

var my_orders = $("#bookLoop"); 
$.each(data, function(i, order) {
     $("#bookName").append(data[i].order.bname);,
     $("#bookURL").append(data[i].order.blink);
});

HTML（应为循环的代码结构）：

<div id="bookLoop">
   <div class="col-3">
      <div class="block-content">
        <div class="d-md-flex">
            <h3 id="bookName" class="h4 font-w700"></h3>
        <div>
        <div class="d-md-flex link">
           <a href="#" id="bookURL">Details</a>
        <div>
      <div>
   <div>
<div>

JSON：

[
   {"order":{"id":"61","bname":"Book 1","blink":984}},
   {"order":{"id":"42","bname":"Book 2","blink":5414}},
   {"order":{"id":"185","bname":"Book 3","blink":4521}},
   {"order":{"id":"62","bname":"Book 4","blink":41254}},
   {"order":{"id":"15","bname":"Book 5","blink":7464}}
]

Answer 1

我认为，您想要的是在#bookLoop内附加每本书并链接，对每本书进行链接并使其具有自己的内容。

在下面，我为每本书创建元素（节点），然后将其附加到my_orders 。

看看是否是您想要的，如果不是，请编辑您的问题，以显示所需呈现的HTML的示例

 var my_orders = $("#bookLoop"); var books = '' var links = '' let data = [ {"order":{"id":"61","bname":"Book 1","blink":984}}, {"order":{"id":"42","bname":"Book 2","blink":5414}}, {"order":{"id":"185","bname":"Book 3","blink":4521}}, {"order":{"id":"62","bname":"Book 4","blink":41254}}, {"order":{"id":"15","bname":"Book 5","blink":7464}} ] $.each(data, function(i, order) { let col = document.createElement('div') col.className = 'col-3' let content = document.createElement('div') content.className = 'block-content' let flexC = document.createElement('div') flexC.className = 'd-md-flex' let title = document.createElement('h3') title.className = 'h4 font-w700' title.textContent = data[i].order.bname; flexC.append(title) let flexL = document.createElement('div') flexL.className = 'd-md-flex link' let details = document.createElement('a') details.className = 'bookURL' details.href = "#" details.textContent = "Details: " + data[i].order.blink flexL.append(details) my_orders.append(col) col.append(content) content.append(flexC) content.append(flexL) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bookLoop"> <div>