Блог

Я работаю над школьным заданием в jQuery, и у меня возникают проблемы с пониманием того, как добавлять объекты друг к другу. Назначение состоит в том, чтобы взять результат запроса GET (массив объектов JSON) и использовать jQuery для их отображения на веб-странице.

Объекты выглядят так:

 Object {   strDrink: "Afterglow",   strDrinkThumb: "https://www.thecocktaildb.com/images/media/drink/vuquyv1468876052.jpg",   idDrink: "12560" }  

У меня отключена часть API. Моя проблема (я думаю) заключается в правильном создании и добавлении HTML-элементов. Используя обычные селекторы DOM, я пытаюсь сделать следующее:

 let grid = document.createElement('div'); grid.classList.add('d-flex', 'flex-wrap', 'justify-content-center'); for (let i = 0; i lt; data.drinks.length; i  ) {  let card = document.createElement('div');  card.classList.add('figure', 'col-3', 'mx-2', 'mb-3', 'border', 'border-4', 'border-white', 'rounded-0');  let img = document.createElement('img');  img.classList.add('card-img-top')  img.src = data.drinks[i].strDrinkThumb;  card.append(img);  let drinkName = document.createElement('h5');  drinkName.innerText = data.drinks[i].strDrink;  drinkName.classList.add('py-5', 'figure', 'hover-class');  card.append(drinkName);  grid.append(card);  }  ("#results").append(grid);  

Я создал элемент сетки в jQuery следующим образом:

 $("#results").append('lt;div id="grid" class="d-flex flex-wrap justify-content-center"gt;lt;/divgt;');  

Пока все идет хорошо, насколько я могу судить по инспектору. Затем, если я пройдусь по элементам следующим образом:

 for (var drink in data.drinks) {  $("lt;div class='figure col-3 mx-2 mb-3 border border-4 border-white rounded-0'gt;Testlt;/divgt;").appendTo("#grid");  

Я получаю ожидаемую сетку. Проблема, с которой я сталкиваюсь, заключается в том, как создать оставшиеся элементы, используя идентификатор, а не класс, что, я думаю, создаст беспорядок? Объекты имеют уникальные идентификаторы (имя и идентификатор), которые будут работать, я просто не знаю, как использовать эти значения в HTML. Или, может быть, есть лучший способ сделать это, может быть? Кроме того, могу ли я создать элемент в jQuery и прикрепить к нему другой элемент, а не к чему-то уже содержащемуся в html?

***Редактировать После того, как я немного поспал, я думаю, что увидел очевидное. Моя проблема сейчас заключается в доступе к данным, которые мне нужны внутри HTML-тегов. Код:

 for (var drink in data.drinks) {   let card = $("lt;div class='figure col-3 mx-2 mb-3 border border-4 border-white rounded-0'gt;lt;/divgt;")  let image = document.createElement('img');  image.classList.add('card-img-top')  image.src = drink.strDrinkThumb;  let drinkName = document.createElement('h5');  drinkName.innerText = drink.strDrink;  drinkName.classList.add('py-5', 'figure', 'hover-class');  $(image).append(drinkName);  $(card).append(image);  $(grid).append(card);    

Это работает, за исключением того, что элементы image и drinkName отображаются на веб-странице как неопределенные. Как я могу получить код, чтобы извлечь URL-адрес и строковые значения из объекта drink и правильно их использовать?