Как повторно использовать элемент HTML на той же странице, используя jQuery?

Question

Я создал элемент div с именем main-middle-column-container в моем HTML и присвоил ему стиль CSS. По сути, main-middle-column-container создаст окно сообщения, похожее на твиттер, которое будет содержать имя, дату / время и сообщение.

Я хочу повторно использовать main-middle-column-container и весь код внутри него с jQuery, чтобы при поступлении новых данных он использовал fre sh main-middle-column-container в качестве шаблона для добавления в новые значения (например, как будет работать твиттер). Когда поступают новые данные, @username, date/time и This is a random message. #random будут заменены входящими данными или оставят элементы пустыми, а новые данные заполнят их.

Я думал об использовании $('.main-middle-column-container').clone().appendTo('.main-middle-column-wrapper'); но это приведет к двойному клонированию (1 блок -> 2 блока -> 4 блока -> 8 блоков ...) вместо клонирования один раз. У меня также есть проблема избавления от main-middle-column-container до того, как я получу какие-либо данные, потому что я не хочу пустое поле на веб-сайте, который я пытаюсь создать. Я хочу, чтобы main-middle-column-container создавалось именно тогда, когда я получаю какие-то данные / сообщения.

CSS и HTML (окно сообщения)

.main-middle-column-wrapper{
  display: flex;
  flex-direction: column;
  width: 49%;
}

.main-middle-column-container{
  width: 100%;
}

.main-middle-column{
  font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
  font-size: 14px;
  height: auto;
  width: 100%;
  background-color: white;
  padding: 9px 12px;
  z-index: -2;
  box-shadow: 0 0 2px 0 lightgray;
  position: relative;
}

.main-middle-column:hover{
  background-color: hsl(200, 23%, 96%);
}

.tweet-pic-wrapper{
  position: absolute;
  top: 5px;
}

.tweet-pic-container{
  position: relative;
  height: 48px;
  width: 48px;
  border: 3px solid transparent;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
}

.tweet-pic{
  position: absolute;
  margin: 0 auto;
  height: 100%;
  left: -6px;
  width: auto;
}

.title-account-time{
  margin-left: 55px;
}

.msg-title{
  font-weight: bold;
}

.msg-acc-name{
  color: #657786;
}

.msg-acc-name:hover{
  cursor: pointer;
}

.msg-date{
  color: #657786;
  margin-top: 1px;
}

.tweet-msg{
  margin-left: 55px;
  margin-top: 5px;
}

<div class="main-middle-column-wrapper">
  <div class="main-middle-column-container">
    <div class="main-middle-column">
      <div class="tweet-pic-wrapper">
        <div class="tweet-pic-container">
          <img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
        </div>
      </div>
      <div class="title-account-time">
        <span class="msg-title">My Twitter</span>
        <span class="msg-acc-name">@username</span>
        <div class="msg-date">date/time</div>
      </div>
      <div class="tweet-msg">
        This is a random message. #random
      </div>
    </div>
  </div>
</div>

Answer 1

Создайте функцию, которая возвращает шаблонный литерал с желаемой структурой разметки HTML. Сопоставьте свои твиты и вставьте их в целевого родителя:

const tweets = [
  {
    _id: 321,
    pic: "https://placehold.it/80x80/0bf",
    title: "My Twitter",
    name: "@username",
    date: "2020-01-18",
    msg: "this is a story"
  },
  {
    _id: 231,
    pic: "https://placehold.it/80x80/f0b",
    title: "My alter Twitter",
    name: "@user",
    date: "2020-01-19",
    msg: "Again, another story"
  }
];

const newTweet = tweet => `<div class="main-middle-column">
    <div class="tweet-pic-wrapper">
      <div class="tweet-pic-container">
        <img src="${tweet.pic}" class="tweet-pic" alt="${tweet.title}">
      </div>
    </div>
    <div class="title-account-time">
      <span class="msg-title">${tweet.title}</span>
      <span class="msg-acc-name">${tweet.name}</span>
      <div class="msg-date">${tweet.date}</div>
    </div>
    <div class="tweet-msg">${tweet.msg}</div>
  </div>`; 
  
const populateNewTweets = (tweets, parent) => {
  if (!tweets.length) return;
  $('<div>', {
    class: 'main-middle-column-container',
    appendTo: parent,
    append: tweets.map(newTweet)
  });
};

populateNewTweets(tweets, '.main-middle-column-wrapper');

.main-middle-column-wrapper{
  display: flex;
  flex-direction: column;
  width: 49%;
}

.main-middle-column-container{
  width: 100%;
}

.main-middle-column{
  font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
  font-size: 14px;
  height: auto;
  width: 100%;
  background-color: white;
  padding: 9px 12px;
  z-index: -2;
  box-shadow: 0 0 2px 0 lightgray;
  position: relative;
}

.main-middle-column:hover{
  background-color: hsl(200, 23%, 96%);
}

.tweet-pic-wrapper{
  position: absolute;
  top: 5px;
}

.tweet-pic-container{
  position: relative;
  height: 48px;
  width: 48px;
  border: 3px solid transparent;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
}

.tweet-pic{
  position: absolute;
  margin: 0 auto;
  height: 100%;
  left: -6px;
  width: auto;
}

.title-account-time{
  margin-left: 55px;
}

.msg-title{
  font-weight: bold;
}

.msg-acc-name{
  color: #657786;
}

.msg-acc-name:hover{
  cursor: pointer;
}

.msg-date{
  color: #657786;
  margin-top: 1px;
}

.tweet-msg{
  margin-left: 55px;
  margin-top: 5px;
}

<div class="main-middle-column-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

$('.main-middle-column-container').first().clone().appendTo('.main-middle-column-wrapper');

Ключ состоит в том, чтобы выбрать только один элемент для клонирования. Первый так же хорош, как и любой другой.

Answer 3

Лучшее решение для этого было бы использовать какой-то шаблонизатор, например Усы . Если, однако, об этом не может быть и речи, решение вашей проблемы будет примерно таким:

jQuery(document).ready(function() {
     /* this should store the container templates clone in a variable */
     mainMiddleContainerTemplate = jQuery(".main-middle-column-container").get(0).clone();

     /* this should remove every main middle container from the view, in case
        you have multiple containers that are not templates, consider adding
        an additional class to your template container */
     jQuery(".main-middle-column-container").remove();
});

function addNewContainer(containerData) {
    var newContainer = mainMiddleContainerTemplate.clone();

    /** add and replace all the data needed on the newContainer **/
    newContainer.find('.message-title').html(containerData.title);
    newContainer.find('.msg-acc-name').html(containerData.accountName);
    ....

    jQuery(".main-middle-container-wrapper").append(newContainer);
}

Но, тем не менее, я бы посоветовал вам использовать шаблонизатор для подобных вещей.

Answer 4

Я думаю, у меня есть решение для вас, вы можете создать «шаблон» и получить этот шаблон с помощью jquery. Если вы поместите это в свой основной html файл

<script id="hidden-template" type="text/x-custom-template">
    <div class="main-middle-column-wrapper">
  <div class="main-middle-column-container">
    <div class="main-middle-column">
      <div class="tweet-pic-wrapper">
        <div class="tweet-pic-container">
          <img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
        </div>
      </div>
      <div class="title-account-time">
        <span class="msg-title">My Twitter</span>
        <span class="msg-acc-name">@username</span>
        <div class="msg-date">date/time</div>
      </div>
      <div class="tweet-msg">
        this is a story all about how my life got flipped turned upside down and id like to take a minute and just sit right there id like to tell you how i became a prince in a town called belair.
      </div>
    </div>
  </div>
</div>
</script>

Вы можете получить содержимое с помощью jquery вот так

var template = $('#hidden-template').html();

Теперь у вас есть html 'шаблон' в вашем javascipt теперь вы можете создать более одного из этих элементов.

$('#target').append(template);

Или вы можете использовать лучший / более простой метод с простым javascript

const card = ({ img_alt, img_src, title, username, date, msg }) => `
  <div class="main-middle-column-wrapper">
  <div class="main-middle-column-container">
    <div class="main-middle-column">
      <div class="tweet-pic-wrapper">
        <div class="tweet-pic-container">
          <img src="${img_src}" class="tweet-pic" alt="${img_alt}">
        </div>
      </div>
      <div class="title-account-time">
        <span class="msg-title">${title}</span>
        <span class="msg-acc-name">@${username}</span>
        <div class="msg-date">${date}</div>
      </div>
      <div class="tweet-msg">${msg}</div>
    </div>
  </div>
</div>
`;

Вы можете использовать это как функция для динамического создания ваших элементов со всеми видами данных.