引导列表组：是不是可以复制项目？

Posted 2023-05-08

【中文标题】引导列表组：是不是可以复制项目？

【英文标题】：Bootstrap list-group: is it possible to duplicate item?引导列表组：是否可以复制项目？

【发布时间】：2021-04-05 03:43:36

【问题描述】：

我是 Web 开发的新手，现在开始使用 bootstrap 和 jquery 作为开始。

我对 Web 开发的理解可能有误，但我还是会尝试问这个：

我有一个 list-group 和 cards。每张卡片作为一个项目（只是li，不使用list-group-item来保留card的风格）。

我希望能够动态插入新的cards。目前我正在使用 js/jquery 手动添加 html 代码。例如：

let card_class = document.createElement("div");
card_class.setAttribute("class", "card mx-3 my-5");
card_class.setAttribute("name", "card-class");
let row_class = document.createElement("div");
row_class.setAttribute("class", "row no-gutters bg-dark text-white-50");
row_class.setAttribute("name", "row-class");
let profile_class = '<div class="col-auto">'+
'<img src="profile.jpg" style="height:50px;" class="img-fluid" ></img></div>';
let col_class = document.createElement("div");
col_class.setAttribute("class", "col");
col_class.setAttribute("name", "col-class");
let card_col_class = document.createElement("div");
card_col_class.setAttribute("class", "card-block px-2");
card_col_class.setAttribute("name", "card-col-class");
let card_footer = '<div class="card-footer"><span class="btn-toolbar btn-group-sm px-5">'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="fas fa-retweet"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-heart"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-share-square"></i></button></span></div>';

//get the tweet info (object parameter) and put it in the header and body of the card.
let username = tweet_info.username;
let tweet = tweet_info.tweet;
let card_header = '<div class="card-header"><a href="#" class="link text-decoration-none">@'+username+'</a></div>';
let card_body = '<div class="card-body" style="white-space: pre-wrap;" onclick="setInfo(this)" type="button"'+
                'data-toggle="modal" data-target="#tweet-id">'+tweet+"</div>";

//now actually add the card to the html.
$("div[name='main-content'").prepend(card_class);
$("div[name='card-class']").append(row_class);
$("div[name='row-class']").append(profile_class);
$("div[name='row-class']").append(col_class);
$("div[name='col-class']").append(card_col_class);
$("div[name='card-col-class']").append(card_header);
$("div[name='card-col-class']").append(card_body);
$("div[name='card-col-class']"]).append(card_footer);   

我想知道的是，如何简化我的代码。

我想，是否有可能获取一个 li 项目，复制它并稍微更改一下？

---

编辑：

例如要复制的HTML代码（同js代码）：

<li class="card">
    <div class="row no-gutters bg-dark text-white-50">
        <div class="col-auto">
            <img src="profile.jpg" style="height:50px;" class="img-fluid" >
        </div>
        <div class="col">
            <div class="card-block px-2">
                <div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
                <div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
                <div class="card-footer">
                    <span class="btn-toolbar btn-group-sm px-5">
                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
                     </span>
                 </div>
             </div>
         </div>
     </div>
 </li>

【参考方案1】：

您可以使用.clone() 克隆您的html 元素，然后使用.find() 更改此克隆元素中的任何元素，最后使用appendTo 方法将其附加到您的ul。

演示代码：

$("#cloned").on("click", function() 
  var cln = $("ul li:first").clone() //cloned first li
  cln.find(".link").text("something") //use find and change username
  cln.find(".card-body").text("something something...") //use find and change content
  $(cln).appendTo($("ul")) //append to ul
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="card">
    <div class="row no-gutters bg-dark text-white-50">
      <div class="col-auto">
        <img src="profile.jpg" style="height:50px;" class="img-fluid" >
      </div>
      <div class="col">
        <div class="card-block px-2">
          <div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
          <div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
          <div class="card-footer">
            <span class="btn-toolbar btn-group-sm px-5">
                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
                     </span>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
<button id="cloned">Clone Me</button>