如何使用 jQuery 在同一页面上重用 HTML 元素？

Question

我在 HTML main-middle-column-container创建了一个名为main-middle-column-container的 div 元素，并使用 CSS 对其进行了样式设置。 基本上， main-middle-column-container将创建一个类似 twitter 的消息框，其中包含名称、日期/时间和消息。

我想用 jQuery 重用main-middle-column-container和其中的所有代码，这样当新数据进来时，它将使用一个新的main-middle-column-container作为模板来添加新值（就像推特的工作方式一样）。 当新数据进来时， @username 、 date/time和This is a random message. #random 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

我想我有一个解决方案，您可以创建一个“模板”并使用 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();

现在您的 javascipt 中有 html '模板'，现在您可以创建多个这些元素。

$('#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>
`;

您可以将其用作一个函数来使用各种数据动态创建您的元素。

Answer 3

对此的最佳解决方案是使用某种模板引擎，例如Mustache 。 但是，如果这是不可能的，那么您的问题的解决方案将是这样的：

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

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

关键是只选择一个要克隆的元素。 第一个和其他的一样好。