javascript - jQuery 多次复制现有的 Div

Question

我正在构建一个可以提供结果的搜索查询。

我为隐藏的 div 中的元素准备了一个模板。我想要做的是使用 jQuery 将模板复制 n 次。

例如:我搜索航类，我得到 5 个搜索结果，我需要复制下面的 div 模板 5 次

<div id="oneWayFlightElement" class="displayNone">
        <div id="flightIndex1" class="flightDetailElement boxShadowTheme">
                <div id="flightDetailsLeftPanel1" class="flightDetailsLeftPanel marginBottom10">
                    <div class="fullWidth marginTop10">
                        <span id="flightPriceLabel1" class="headerFontStyle fullWidth boldFont">Rs 9500.00</span><hr/>
                           <div id="homeToDestination1" class="flightBlockStyle">
                            <span id="flightNumberFromHome1" class="fontSize16">AI-202</span><br/>
                               <span id="flightRouteFromHome1" class="fontSize26">PNQ > DEL</span><br/>
                               <span id="flightDepartTimeFromHome1" class="fontSize26">Depart: 10.00 AM</span><br/>
                               <span id="flightArrivalTimeFromHome1" class="fontSize26">Arrive: 12.00 PM</span><br/>
                           </div>
                           <div id="destinationToHome1" class="flightBlockStyle">
                            <span id="flightNumberToHome1" class="fontSize16">AI-202</span><br/>
                               <span id="flightRouteToHome1" class="fontSize26">PNQ > DEL</span><br/>
                               <span id="flightDepartTimeToHome1" class="fontSize26">Depart: 10.00 AM</span><br/>
                               <span id="flightArrivalTimeToHome1" class="fontSize26">Arrive: 12.00 PM</span><br/>
                           </div>
                       </div>
                   </div>
                   <div id="flightDetailsRightPanel1" class="flightDetailsRightPanel textAlignRight marginBottom10">
                    <img src="images/flightIcon.png" class="marginRight10 marginTop10 width40"/><br/>
                       <button class="marginRight10 marginBottom10 width40 bookNowButtonStyle">Book Now</button>
                   </div>
                </div>
    </div>

在这个div里面5次

<div id="searchFlightResultDiv" class="fullWidth" style="border:solid">

                </div>

有没有比在 jQuery 中追加字符串更好的方法？

谢谢，安吉塔纳

Answer 1

您需要将模板 div (#flightIndex1) 包装在一个具有唯一 id 属性的容器中。然后，您获取该容器的内容(单个记录的模板)，并使用某种基于收到的结果数。

基本上，

HTML:

<!-- Here's your template -->
<div class="displayNone" id="oneWayFlightElement">
    <!-- This id (singleResult) is important -->
    <div id="singleResult">Result</div>
</div>
<!-- Container for the results -->
<div id="results"></div>

Javascript:

//Get the number of results. 
//This can be sent from your API or however you're getting the data.
//For example, in PHP you would set this to $query->num_rows();
var count = 5;

//Start a for loop to clone the template element (div#singleResult) into div#results 'count' times.
//This will repeat until the number of records (count) has been reached.
for (i = 1; i <= count; i++) {

    //Append the HTML from div#thingToRepeat into the #results.
    $('#results').append($('#singleResult').clone());

}

这是一个 JSFiddle向您展示它是如何工作的。您可以使用它并在必要时进行调整。

如果不告诉您这样做的缺点，我不可能有意识地完成这篇文章。这样做主要在网络开发社区中是不受欢迎的，而且 super 效率低下。它可能对练习和学习有好处，但请务必查看并考虑像 moustache 这样的 javascript 模板框架。或 handlebars .它做同样的事情，但效率更高。

希望这对您有所帮助!