Как я могу создать несколько DIV с «append» в jQuery? - PullRequest
Новая
       35

Как я могу создать несколько DIV с «append» в jQuery?

0 голосов
/ 14 февраля 2019

Я хочу зациклить несколько элементов 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}}
]

1 Ответ

0 голосов
/ 14 февраля 2019

Я думаю, что вам нужно добавить каждую книгу и ссылку внутри #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>
...