Как добавить подразделы в HTML-файл? ⇐ Jquery

[Anonymous]

Заполните общий список записей. Для этого TODO вам необходимо собрать новые и

• для общих данных записей Билли. В отличие от TODO 4, в DOM нет раздела или неупорядоченного списка для записей, поэтому вам также придется использовать jQuery для создания этих элементов. .
  • Создайте записи и добавьте их под разделом записей с самым высоким рейтингом в боковая панель. Как этого добиться с помощью jQuery?
  • Создайте , стилизуйте его и добавьте в .
  • Добавьте стилизованный для каждой записи в массиве записей. Какие методы lodash могут вам здесь помочь?
  • Добавьте отдельный для заголовка, исполнитель, выпуск и год каждой записи. Дайте им класс на основе их ключа в объекте.
  • Добавьте правила стиля CSS в css/ site.css для стилизации элементов списка. Могут ли эти правила стиля применяться к элементам списков как в списках с самым высоким рейтингом, так и в списках записей? Как этого можно добиться с помощью селекторов/правил CSS и jQuery?
  Результирующий HTML должен выглядеть примерно так:

  Код: Выделить всё

  
  [*]
  Title: Eastern Rebellion
  Artist: Cedar Walton
  Release: Timeless
  Year: 1976
  
  
  [/list]
  
  

  Однако мой HTML-файл выглядит так:

  Код: Выделить всё

  
  [img]images/billy/billy-0.jpg[/img]
        i="0"
  width="25%"
  class="image"
  />
  
  
  
  Top Rated
  
  [list][/list]
  [*]Voice in the Night
  [*]The Shape of Jazz to Come
  [*]Like Sonny
  [*]Go
  [*]The Water Is Wide
  
  
  [list][/list]
  Eastern Rebellion
  Cedar Walton
  Timeless
  1976
  Soul Food
  Bobby Timmons
  Prestige
  1966
  A Swingin' Affair
  Dexter Gordon
  Blue Note
  1962
  Rejoice
  Pharoah Sanders
  Theresa
  1981
  
  
  
  

  Здесь начинается мой код в файле JS:

  Код: Выделить всё

  const onReady = data => {
  // YOUR CODE BELOW HERE //
  
  $('#section-bio').css('color', 'brown');
  $('#section-quotes').css('color', 'blue');
  /* eslint-enable */
  // TO DO 4 ////
  
  const topRated = data.discography.topRated;
  
  let newSection = document.createElement('section');
  topRated.forEach(recording => {
  $('#section-top-rated').append(`[*]${recording.title}`);
  //let topR = $('#section-top-rated').append(`[*]${recording.title}` );
  });
  const recordings = data.discography.recordings;
  
  $(``).appendTo(
  '#section-top-rated'
  );
  //$(`[list][/list]`).appendTo('#section-recordings')
  //$(`[*]`).appendTo('#list-recordings').appendTo('#list-recordings')
  $('#list-recordings').append(`[*]`);
  $(`#section-recordings`).append(
  `[list][/list]`
  );
  //$('#list-recordings').append(`[*]`)
  
  recordings.forEach(element =>  {
  $(`[*]`);
  $('#section-recordings').append(
  `${element.title}`
  );
  $('#section-recordings').append(
  `${element.artist}`
  );
  $('#section-recordings').append(
  `${element.release}`
  );
  $('#section-recordings').append(
  `${element.year}`
  );
  });
  
  const uL = document.createElement(
  'ul id="list-recordings" class="list-recordings"'
  );
  
  uL.appendTo(`#section-recordings`);
  
  //let newSection = document.createElement('section');
  //$()
  // const recordings = data.discography.recordings;
  //recordings.forEach(songs){
  
  // }
  // YOUR CODE ABOVE HERE //
  };
  

  Все, что я пробовал, закомментировано маркерами //. Я застрял над этой проблемой весь день. Я не знаю почему, но мои списки
• не отображаются, и мне кажется, что из-за их отсутствия решить эту проблему гораздо сложнее. Я не вижу, где он находится, поэтому не знаю, как его перемещать.
  Примечание: фактический data.discography.recordings ссылается на массив объектов.
  Любая помощь поможет, даже просто слова поддержки. Приветствую всех, кто пытается помочь мне с этой проблемой. Если бы я мог хотя бы понять, почему не могу найти
• , это было бы огромным шагом.
  
  Подробнее здесь: https://stackoverflow.com/questions/790 ... -html-file