Оберните элементы в пределах jQuery каждый л oop в пределах div - PullRequest
Новая
       6

Оберните элементы в пределах jQuery каждый л oop в пределах div

0 голосов
/ 21 января 2020

Я работаю с получением некоторых данных из XML в JSON, и все это работает хорошо. Просто я пытаюсь обернуть каждую часть данных в div.

Вот основная часть, с которой я работаю: 

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
    });

, которая выдаст: 

<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>

И так далее. Я хотел бы обернуть все эти элементы в <div>, чтобы он выглядел следующим образом: 

<div>
<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
</div>
<div>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
</div>
<div>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>
</div>

Я не уверен, как эффективно go сделать это. Кроме того, если есть что-то еще, что можно сделать, чтобы очистить то, что у меня есть, я тоже за это.

Ответы [ 4 ]

0 голосов
/ 21 января 2020

Попробуй так: 

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.wrap("<div>");
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
      newsDiv.wrap("</div>");
    });
0 голосов
/ 21 января 2020

Создайте новый пустой div с $('<div>'), затем вызовите .append, передав 3 аргумента (3 элемента, которые вы создаете), и добавьте его к newsDiv: 

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
$(release).each(function(index, newsItem) {
  const $div = $('<div>').append(
    $('<h2>').text(newsItem.headline),
    $('<p>').text(newsItem.releaseDate),
    $('<a href="https://urltothing.com/' + newsItem.id + '">Read More</a>')
  );
  newsDiv.append($div);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Похоже, вы смешиваете jQuery и ванильные методы DOM, что довольно странно. Нет нужды требовать большую библиотеку вроде jQuery для чего-то такого тривиального. Если вы хотите использовать ванильные методы DOM, вы можете легко удалить свою зависимость от jQuery, если хотите: 

var newsDiv = document.body.appendChild(document.createElement('div'));
newsDiv.classList.add('news-feed');
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
for (const { headline, releaseDate, id } of release) {
  const div = newsDiv.appendChild(document.createElement('div'));
  div.innerHTML = '<h2></h2><p></p><a href="https://urltothing.com/' + id + '">Read More</a>';
  const [h2, p] = div.children;
  h2.textContent = headline;
  p.textContent = releaseDate;
}
0 голосов
/ 21 января 2020

пожалуйста, сделайте следующее: 

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var divi=document.createElement("div");
      var idnum = newsItem.id;
      divi.append($(document.createElement("h2")).text(newsItem.headline));
      divi.append($(document.createElement("p")).text(newsItem.releaseDate));
      divi.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
      newsDiv.appendChild(divi);
    });
0 голосов
/ 21 января 2020

Лучший способ добиться этого - сделать что-то вроде этого: 

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
$(release).each(function(index, newsItem) {
  var itemDiv = $(document.createElement("div"));
  var idnum = newsItem.id;
  itemDiv.append($(document.createElement("h2")).text(newsItem.headline));
  itemDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
  itemDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
  newsDiv.append(itemDiv);
});

Обратите внимание, как я создаю еще один элемент div, чтобы обернуть другие элементы.

Что касается очистки кода использование JS инфраструктуры пользовательского интерфейса (например, React [технически не является структурой], Angular или Vue) было бы лучшим способом, поскольку оно навязывает разработчикам определенные методы и экономит код, необходимый для выполнения общих задач.

...